二级联动国省市选择

最新推荐文章于 2024-11-19 16:41:52 发布

攻城师_翔

最新推荐文章于 2024-11-19 16:41:52 发布

阅读量325

点赞数

CC 4.0 BY-SA版权

文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/zwx886688/article/details/54601100

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级联动菜单</title>

<script>
function getCountry(thisobj){
alert(thisobj.value);
}

function selectCity(thisobj){
var data = {
"北京市": ["海淀区","朝阳区","丰台区"],
"河北省": ["石家庄","唐山","秦皇岛"],
"辽宁省": ["沈阳","大连","鞍山"],
"山东省": ["青岛","济南","烟台"]
}

//alert(data[thisobj.value]);
//获取省份对应的市区
var citys = data[thisobj.value];

//填充前先清空之间的数据
//方式二:
//IE10以下的浏览器中, 不支持Select和table上的innerHTML属性
//oSeleCity.innerHTML = "<option>--选择城市--</option>";
document.getElementById("citySpan").innerHTML = "<select id='city'><option>--选择城市--</option></select>";

//方式一
//获取所有的option, 挨个删除
/*
var oPts = oSeleCity.getElementsByTagName("option");
var len = oPts.length;
for(var i=len-1; i>0; i--){
oSeleCity.removeChild(oPts[i]);
}*/
//循环遍历市区, 作为option选项填充到城市下拉列表中
var oSeleCity = document.getElementById("city");

for(var i=0; i<citys.length; i++){
var oPtion = document.createElement("option")
oPtion.innerHTML = citys[i];
oSeleCity.appendChild(oPtion);
}

}
</script>
</head>

<body>

<select name="country" onchange="getCountry(this)" >
<option value="none">--选择国家--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
</select>
<br><br>
<hr/>
<br>
<div id="seleDiv">
<select id="province" onchange="selectCity(this)">
<option>--选择省市--</option>
<option>北京市</option>
<option>河北省</option>
<option>辽宁省</option>
<option>山东省</option>
</select>
<span id="citySpan">
<select id="city">
<option>--选择城市--</option>
</select>
</span>
</div>
</body>

</html>