html
<body>
<select onchange="showCity(this.value)">
<option>---请选择省---</option>
<option value="0">陕西省</option>
<option value="1">山西省</option>
<option value="2">河北省</option>
</select><br />
<select id="city" onchange="showCountryside(this.value)">
<option>---请选择市---</option>
</select><br />
<select id="countryside">
<option>---请选择区---</option>
</select>
</body>js
<script>
var citys1 = ["西安市", "榆林市", "咸阳市", "渭南市", "铜川市"];
var citys2 = ["太原市", "吕梁市", "大同市", "运城市"];
var citys3 = ["石家庄", "唐山市", "保定市", "邯郸市", "沧州市"];
var citys = [citys1, citys2, citys3];
var city = document.getElementById("city")
var countryside = document.getElementById("countryside");
function showCity(obj){
if(obj=="---请选择省---"){
city.length=1;
countryside.length=1;
return;
}//每次进来 都先得情况 option
city.length = 1;
countryside.length=1;
for(var i = 0; i < citys[obj].length; i++) { //当前所有 省份 对应的市
//生成对应的 市
var opEle = document.createElement("option");
opEle.value = obj +"-" +i; //value 值 为 0-0
var textNode = document.createTextNode(citys[obj][i]);
opEle.appendChild(textNode);
//将option添加到city 下拉框中
city.appendChild(opEle);
}
}
var countrys = [
[
["长安区", "未央区", "碑林区", "雁塔区"],
["榆阳区", "神木"],
["咸阳1", "咸阳2"],
["渭南1", "渭南2"],
["铜川1", "铜川2"]
],
[
["太原市1", "太原市2"],
["吕梁市1", "吕梁市2"],
["大同市1", "大同市2"],
["运城市1", "运城市2"]
],
[
["石家庄市1", "石家庄市2"],
["唐山市1", "唐山市2"],
["保定市1", "保定市2"],
["邯郸市1", "邯郸市2"],
["沧州市1", "沧州市2"]
]
]; //三维数组
function showCountryside(city) {
countryside.length = 1;
if(city == "---请选择市---") {
countryside.length=1;
return;
}
// 所指定的 区
var arrContry = countrys[city.substr(0,1)][city.substr(2, 1)]
//清空option
for(var i = 0; i < arrContry.length; i++) {
var opEle = document.createElement("option");
var textNode = document.createTextNode(arrContry[i]);
opEle.appendChild(textNode);
countryside.appendChild(opEle);
}
}
</script>
3387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
