1.1html
js中this指的是当前操作的对象
<tr>
<td>籍贯</td>
<td><select onchange="changeCity(this.value)" 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></td>
</tr>
1.2js部分
//1创建一个二维数组进行存储省份和城市
var cities = new Array(3);
cities[0] = new Array("徐州","南京","南通");
cities[1] = new Array("1","2","3");
cities[2] = new Array("4","5","6");
cities[3] = new Array("7","8","9");
function changeCity(val) {
//8获取第二个下拉列表
var cityE = document.getElementById("city");
//9清空列表option
cityE.options.length=0;
//2遍历二维数组中的省份
for(var i=0;i<cities.length;i++){
if(val==i){
//3遍历用户选择省份下面的城市
for(var j=0;j<cities[i].length;j++){
//alert(cities[i][j]);
//4创建城市的文本节点
var cityT = document.createTextNode(cities[i][j]);
//5创建option元素节点
var optionE = document.createElement("option");
//6将城市文本节点添加到option元素节点
optionE.appendChild(cityT);
//7将option元素节点添加到第二个下拉列表中去
cityE.appendChild(optionE);
}
}
}
}
1.3JQuery部分
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//2创建二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("徐州","南京","南通");
cities[1] = new Array("1","2","3");
cities[2] = new Array("4","5","6");
cities[3] = new Array("7","8","9");
//1获取用户选择的省份
$("#province").change(function(){
var val = this.value;
//10清空上一次循环的option节点
$("#city").empty();
//3遍历二维数组中的省份
$.each(cities,function(i,n){
//4判断用户所选择的省份
if(val==i){
//5遍历所选省份下面的城市
$.each(cities[i],function(j,m){
//6创建城市文本节点
var cityNode = document.createTextNode(m);
//7创建option元素
var optE = document.createElement("option");
//8将城市追加到option元素里面
$(optE).append(cityNode);
//9将option元素追加到city里面
$(optE).appendTo($("#city"));
});
}
});
});
});
</script>