标签：load element 深圳市 -- turn 就会 分享 onchange chage
必须要设置下拉列表的length 不然就会出现未定义!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var arr_province = ["请选择省/城市", "北京市", "上海市", "天津市", "重庆市", "深圳市", "广东省", "河南省"];
var arr_city = [
["请选择城市/地区"],
["东城区", "西城区", "朝阳区", "宣武区", "昌平区", "大兴区", "丰台区", "海淀区"],
[‘宝山区‘, ‘长宁区‘, ‘丰贤区‘, ‘虹口区‘, ‘黄浦区‘, ‘青浦区‘, ‘南汇区‘, ‘徐汇区‘, ‘卢湾区‘],
[‘和平区‘, ‘河西区‘, ‘南开区‘, ‘河北区‘, ‘河东区‘, ‘红桥区‘, ‘塘古区‘, ‘开发区‘],
[‘俞中区‘, ‘南岸区‘, ‘江北区‘, ‘沙坪坝区‘, ‘九龙坡区‘, ‘渝北区‘, ‘大渡口区‘, ‘北碚区‘],
[‘福田区‘, ‘罗湖区‘, ‘盐田区‘, ‘宝安区‘, ‘龙岗区‘, ‘南山区‘, ‘深圳周边‘],
[‘广州市‘, ‘惠州市‘, ‘汕头市‘, ‘珠海市‘, ‘佛山市‘, ‘中山市‘, ‘东莞市‘],
[‘郑州市‘]
];
/**
* 1.页面加载后加载省市
* 2.省市绑定onchage事件
*/
//获取下拉列表
window.onload = function() {
var arr_obj = $("province");
var arr_city_obj = $("city");
//获取数组 必须要设置下拉列表的length！！！
var arr_pro_len = arr_obj.length = arr_province.length;
var arr_city_len = arr_city_obj.length;
//往第一个下拉列表的option写入数据
for (var i = 0; i < arr_pro_len; i++) {
arr_obj.options[i].text = arr_province[i];
arr_obj.options[i].value = i;
}
//添加元素内容改变事件
window.onchange = function() {
//先获取省市的值的selectedIndex 并且通过创建变量保存
var sIndex = arr_obj.selectedIndex;
arr_pro_len=arr_city_obj.length =arr_city[sIndex].length;
for (var j = 0; j < arr_pro_len; j++) {
arr_city_obj.options[j].innerHTML = arr_city[sIndex][j];
}
}
//获取目标
function $(obj) {
return document.getElementById(obj);
}
}
</script>
</head>
<body>
<select id="province">
</select>
<select id="city">
<!--为城区下拉列表设置默认选项-->
<option> 请选择城市/地区 </option>
</select>
</body>
</html>
标签：load element 深圳市 -- turn 就会 分享 onchange chage
原文地址：http://www.cnblogs.com/bbqwifi/p/6180833.html
