jQ学习之实现简单的二级联动（jq的遍历练习）

主要练习了jq的一种遍历模式，还有几种一会儿再详细写一篇

内容逻辑结构和JS无异，直接上代码：

html:

 1     <div style="text-align: center;margin-top: 200px;">
 2             姓名--兴趣爱好 &nbsp;&nbsp;&nbsp;&nbsp;
 3             <!-- //下面为第一级列表绑定onchange事件，同时传参此时用this.value方法 -->
 4             <select>
 5                 <option>--请下拉选择--</option>
 6                 <option value="0">张三</option>
 7                 <option value="1">李四</option>s
 8             </select>
 9             <select id="hobby">
10             </select>
11         </div>

jQ:

 1     $(function() {
 2                 //找到select标签 绑定change事件
 3                 $("div select:first").change(function() {
 4                     //每次发生改变时要清空hobby这个里面的内容,否则会出现内容叠加
 5                     $("#hobby").empty();
 6                     //定义一个二维数组用来存储第二级的列表信息
 7                     var stus = new Array();
 8                     stus[0] = new Array("唱", "跳", "rap");
 9                     stus[1] = new Array("足球", "篮球", "羽毛球");
10                     //找到改变后的第一个select的值
11                     var val = $(this).val();
12                     //用$.each循环遍历 也可以用其他的两种循环遍历方式
13                     /* $.each循环遍历中第一个参数可以是数组,也可以是对象的集合,
14                     第二个参数function中的第一个参数相当于for循环中的i第二个参数相当于在i索引位置对应的实际的值 */
15                     $.each(stus, function(i, n) {
16                         if (val == i) {
17                             $.each(stus[i], function(j, m) {
18                                 var textC = document.createTextNode(m);
19                                 var optionEle = document.createElement("option");
20                                 $(optionEle).append(textC);
21                                 $("#hobby").append(optionEle);
22                             })
23                         }
24                     })
25                 })
26             })