jQuery写省级联动列表,创造二维数组来存放数据,然后通过each来遍历调用,通过creatTxtNode创建文本节点,通过createElement创建标签option,在通过append将文本写入option,再通过appendTo将文本追加到id为city的市级列表中
代码如下:
jquery部分:
1 <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> 2 <script type="text/javascript"> 3 $(function(){ 4 // 创造二维数组 5 var city=new Array(3); 6 city[0]=new Array("1","2","3"); 7 city[1]=new Array("4","5","6"); 8 city[2]=new Array("7","8","9"); 9 city[3]=new Array("44","55","66"); 10 // 通过id以及给需要改变的select赋值 11 $("#pro").change(function(){ 12 // 每没执行一次,清空一次,否则会重复出现 13 $("#city").empty; 14 // 把当前得到的值赋值给变量val 15 var val=this.value; 16 // jQuery写循环遍历 17 $.each(city,function(i,j){ 18 // 如果当前值跟遍历的值为一样的,则再进行下一步操作,伪类证明这个循环有意义 19 if(val==i){ 20 // 再次遍历拿到二维数组中的值 21 $.each(city[i],function(m,n){ 22 // 创造一个文本节点,来存放文本 23 var txt=document.createTextNode(n); 24 // 创造option标签,并声明变量来接收 25 var op=document.createElement("option"); 26 // 将文本写入到标签option中 27 $(op).append(txt); 28 // 将option标签追加到id为city的select中 29 $(op).appendTo("#city"); 30 }); 31 } 32 }); 33 }); 34 }); 35 </script>
中间内容:
<!--写一个省级的列表--> <select name="pro" id="pro"> <option value="0">湖北</option> <option value="1">湖南</option> <option value="2">河北</option> <option value="3">河南</option> </select> <!--写一个空的列表来存放市级城市--> <select name="city" id="city"> </select>
样式没有设置,大家可以自己按照喜欢的设置哦!