jQuery写省级联动列表,创造二维数组来存放数据,然后通过each来遍历调用,通过creatTxtNode创建文本节点,通过createElement创建标签option,在通过append将文本写入option,再通过appendTo将文本追加到id为city的市级列表中

代码如下:

jquery部分:

 <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 创造二维数组
var city=new Array(3);
city[0]=new Array("1","2","3");
city[1]=new Array("4","5","6");
city[2]=new Array("7","8","9");
city[3]=new Array("44","55","66");
// 通过id以及给需要改变的select赋值
$("#pro").change(function(){
// 每没执行一次,清空一次,否则会重复出现
$("#city").empty;
// 把当前得到的值赋值给变量val
var val=this.value;
// jQuery写循环遍历
$.each(city,function(i,j){
// 如果当前值跟遍历的值为一样的,则再进行下一步操作,伪类证明这个循环有意义
if(val==i){
// 再次遍历拿到二维数组中的值
$.each(city[i],function(m,n){
// 创造一个文本节点,来存放文本
var txt=document.createTextNode(n);
// 创造option标签,并声明变量来接收
var op=document.createElement("option");
// 将文本写入到标签option中
$(op).append(txt);
// 将option标签追加到id为city的select中
$(op).appendTo("#city");
});
}
});
});
});
</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>

样式没有设置,大家可以自己按照喜欢的设置哦!

05-11 08:21