<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select id="province">
<option value="-1">请选择</option>
</select>
<select id="city">请选择</select>
<select id="country">请选择</select>
<script>
var provinceArr=["内蒙古","河南","山东"];
var cityArr=[
["呼和浩特","赤峰","鄂尔多斯"],
["洛阳","开封","驻马店","南阳"],
["济南","烟台","日照","东营"]
];
var countryArr=[
[["赛罕区","玉泉区","新城区"],
["红山区","松山区","元宝山区","宁城县"],
["东胜区","康巴什区","准格尔旗","达拉特旗"]],
[["洛龙区","老城区","孟津区","偃师区","新安县"],
["龙亭区","鼓楼区","祥符区"],
["驿城区","西平县"],
["宛城区","西峡县","南召县"]],
[["历下区","天桥区","市中区"],
["福山区","莱山区","蓬莱区","招远市"],
["东港区","岚山区","五莲县"],
["东营区","河口区","利津县","广饶县"]],
];
function createOption(obj,data){
for(var i in data){
var op = new Option(data[i],i);
obj.options.add(op);
}
};
var provice = document.getElementById('province');
createOption(provice,provinceArr);
var city = document.getElementById('city');
provice.onchange = function(){
city.options.length =0;
createOption(city,cityArr[provice.value]);
if(provice.value>=0){
city.onchange();
}else{ country.options.length = 0;
}
}
var country = document.getElementById('country');
city.onchange = function(){
country.options.length = 0;
createOption(country,countryArr[provice.value][city.value]);
}
</script>
</body>
</html>
省市三级联动
最新推荐文章于 2024-11-12 11:19:19 发布