<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<script type="text/javascript">
var provinceArr = new Array(5);
provinceArr[0] = new Array("北京市");
provinceArr[1] = new Array("郑州市","洛阳市","濮阳市","驻马店市");
provinceArr[2] = new Array("石家庄市","唐山","秦皇岛","邯郸");
provinceArr[3] = new Array("西安市","宝鸡市","延安");
provinceArr[4] = new Array("菏泽市","济南市","青岛");
function provinceChange(province){
var city = document.getElementById("city");
if(province.value == "-1"){
city.innerHTML = "<option value='-1'>-请选择-</option>";
return;
}
// console.log(provinceArr[province.value]);
var cityArr = provinceArr[province.value];
city.options.length = 0;
for(var i=0;i<cityArr.length;i++){
var cityOption = document.createElement("option");
cityOption.innerText = cityArr[i];
city.appendChild(cityOption);
}
}
</script>
</head>
<body>
<select onchange="provinceChange(this)">
<option value="-1">-请选择-</option>
<option value="0">北京市</option>
<option value="1">河南省</option>
<option value="2">河北省</option>
<option value="3">陕西省</option>
<option value="4">山东省</option>
</select>
<select id="city">
<option value="-1">-请选择-</option>
</select>
</body>
</html>
-----------省市二级联动下拉列表效果
1，创建二维数组
var arr = new Array(n); 省份的个数
arr[0]=new Array(m) 省份下城市的个数
2，清空下拉列表
ele.options.length = 0;
其他常用对象和常用方法
http://www.w3school.com.cn/jsref/index.asp
