javascript下拉菜单三级联动
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
javascript下拉菜单三级联动<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript下拉三级联动</title>
</head>
<body>
<div >
<select id="province">
<option value="-1">请选择</option>
</select>
<select id="city"></select>
<select id="country"></select>
</div>
<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 province = document.getElementById('province');
createOption(province,provinceArr);
var city = document.getElementById('city');
province.onchange = function () {
city.options.length = 0;
createOption(city,cityArr[province.value]);
}
var country = document.getElementById('country');
city.onchange = function(){
country.options.length = 0;
createOption(country,countryArr[province.value][city.value]);
}
province.onchange = function(){
city.options.length = 0;
createOption(city,cityArr[province.value]);
if(province.value>=0){
city.onchange();
}else{
country.options.length = 0;
}
};
</script>
</body>
</html>。