<!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>
原文：https://www.cnblogs.com/hai-/p/13666856.html