主要练习了jq的一种遍历模式,还有几种一会儿再详细写一篇
内容逻辑结构和JS无异,直接上代码:
html:
1 <div style="text-align: center;margin-top: 200px;">
2 姓名--兴趣爱好
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 })