城市联动框的实现

<!DOCTYPE html>
<html>
<head>
<title>城市联动框练习</title>
<script type="text/javascript">
/*之前犯的错误是，我是在点击select元素的时候生成省份列表，导致后面没有办法做选中下拉的option值时，使它显示在select标签上。这令我纠结了很长时间，浪费了一上午时间。解决办法是，直接在界面加载body的时候，把城市下拉列表生成即可。然后你选择下拉值时。就会显示在select标签上。*/
//维护两个全局变量
//以为数组存储省份
var arr1 = ["安徽","江苏","浙江"];
//维护一个二维数组存储省份对应的城市
var arr2 =
[[],["合肥","安庆","六安","黄山","亳州"],["南京","常州","盐城","徐州","扬州"],["杭州","宁波","温州","金华","绍兴"]];
//在加载body的时候，就把省份下拉框加载进来。
function ready(){
//获取省份对应的结点
var province = document.getElementById('province');
//将省份变成1
province.options.length = 1;
//将省份添加进去
for(var i=0 ; i<arr1.length ; i++){
var option = document.createElement('option');
option.innerHTML = arr1[i];
province.appendChild(option);
}
}
function changeProvince(){
//获取省份对应的结点
var province = document.getElementById('province');
//获取选中的省份下标
var index = province.selectedIndex;
//取出对应的城市列表
var citys = arr2[index];
//获取城市对应的结点
var city = document.getElementById('city');
//设置option的个数
city.options.length = 1;
//遍历对应的所有城市，然后创建对应的option添加到select结点上
for(var i=0 ; i<citys.length ; i++){
var option = document.createElement('option');
option.innerHTML = citys[i];
city.appendChild(option);
}
}
</script>
<meta charset="utf-8">
</head>
<body onload="ready()">
<select id="province" onchange="changeProvince()">
<option>省份</option>
</select>
<select id="city" >
<option>城市</option>
</select>
</body>
</html>

城市联动框的实现

猜你喜欢