<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="province">
<option>请选择</option>
</select>
<select id="city">
<option>请选择</option>
</select>
<script>
const aProvince = [["重庆", "大足区", "潼南区"], ["上海", "黄浦区", "徐汇区"], ["北京", "东城区", "西城区"]];
let eProvince=document.getElementById("province");
for (let i = 0; i < aProvince.length; i++){
eProvince.options.add(new Option(aProvince[i][0], i));
}
eProvince.onchange = function () {
let ecity=document.getElementById("city")
ecity.options.length = 1
let index = eProvince.selectedIndex;
for (let i = 0; i < aProvince.length; i++){
if(aProvince[i][0] === eProvince.options[index].text)
{
for (let n = 1; n < aProvince[i].length; n++){
ecity.options.add(new Option(aProvince[i][n], n - 1));
}
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="province" onchange="change(this)">
<option>请选择</option>
</select>
<select id="city">
<option>请选择</option>
</select>
<script>
const aProvince = {"重庆市": ["大足区", "潼南区"], "上海市": ["黄浦区", "徐汇区"], "北京市": ["东城区", "西城区"]};
let eleProvince = document.getElementById("province");
for (let i in aProvince){
let option = document.createElement("option");
option.innerHTML= i;
eleProvince.appendChild(option);
}
function change(par) {
let eleCity = document.getElementById("city");
eleCity.options.length=1;
let choice = par.options[par.selectedIndex].innerHTML
for (let i in aProvince[choice]){
let option = document.createElement("option");
option.innerHTML= aProvince[choice][i];
eleCity.appendChild(option);
}
}
</script>
</body>
</html>