使用jquery实现省市二级列表

这里讲用到

jquery 的  each  遍历方法  追加 节点或元素方法  append  appendTO   以及 remove 清除节点

<script>
            $(function(){
                //2.创建二维数组用来存储省份和城市
                var cities=new Array(3);
                cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
                cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
                cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
                cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
                $("#province").change(function(){
                    //10.清除第二个下拉列表的内容
                    $("#city").empty();
                    //1.获取用选择的省份
                    var val=this.value;
                    //alert(val);
                    //3.遍历二维数组中的省份
                    $.each(cities, function(i,n) {
                        //alert(i+":"+n)
                        //4.判断用户选择的省份和遍历的省份
                        if(val==i){
                            //5.遍历该省份下的所有城市
                            $.each(cities[i], function(j,m) {
                                //alert(m)
                                //6.创建城市文本节点
                                var textNode=document.createTextNode(m);
                                //7.创建option元素节点
                                var opEle=document.createElement("option");
                                //8.将城市节点添加到option元素节点中
                                $(opEle).append(textNode);
                                //9.将option元素节点加到第二个下拉列表中
                                $(opEle).appendTo($("#city"));
                            });
                        }
                    });
                });
                
            });
        </script>

        <!--2.确定事件，通过函数传参的方式拿到改变后的城市-->
                                <select id="province">
                                    <option>--请选择--</option>
                                    <option value="0">湖北</option>
                                    <option value="1">湖南</option>
                                    <option value="2">河北</option>
                                    <option value="3">河南</option>
                                </select>
                                <select id="city">
                                    
                                </select>