<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>#[{11-JS省二级联动}]#</title>
<script>
<!--创建一个二维数组，用来存储省份和城市的对应关系-->
var cities=new Array()
cities[0]=new Array('西安','宝鸡','渭南')
cities[1]=new Array('太原','大同','吕梁')
cities[2]=new Array('苏州','徐州','南京')
function changeCity(val) {
//获取选择城市的select标签
var cityEle=document.getElementById('city');
//清空之前添加的option标签
cityEle.innerHTML='';
//获取选择省份的城市
var selectCities=cities[val];
//依次遍历城市
for (var i =0;i<selectCities.length;i++){
//创建城市的文本节点
var textNode=document.createTextNode(selectCities[i]);
//创建option元素节点
var opEle=document.createElement('option');
//将城市的文本节点添加到option标签里面
opEle.appendChild(textNode);
//将opEle添加到select标签里面
cityEle.appendChild(opEle);
}
}
</script>
</head>
<body>
<select id="province" onchange="changeCity(this.value)">
<option>------请选择省份------</option>
<option value="0">陕西</option>
<option value="1">山西</option>
<option value="2">江苏</option>
</select>
<select id="city">
</select>
</body>
</html>
