<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省级列表多级联动</title>
</head>
<body>
<form>
<select id="province">
<option value="-1">请选择</option>
</select>
<select id="city"></select>
<select id="country"></select>
</form>
<script type="text/javascript">
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)
// console.log(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]);
if (province.value >= 0) {
city.onchange();
} else {
country.options.length = 0;
}
};
var country = document.getElementById("country");
city.onchange = function () {
country.options.length = 0;
createOption(country, countryArr[province.value][city.value]);
};
</script>
</body>
</html>
标签：province,city,菜单,country,多级,value,createOption,联动,var From： https://www.cnblogs.com/LIXI-/p/16860481.html