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

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

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

html:

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

jQ:

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