DOM 练习
忘了参考哪篇文章了…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>联动</title>
</head>
<body>
<label for="city"></label><select name="省市" id="city"></select>
<label for="area"></label><select name="市区" id="area"></select>
<script>
let cityS = ['请选择市', '珠海市', '中山市'];
let district = [
['请选择区'],
['香洲', '金湾', '斗门'],
['三乡', '坦洲', '石岐']
];
let city = document.getElementById('city');
let area = document.getElementById('area');
//一级菜单初始化
city.length = cityS.length;
for (let i = 0; i < cityS.length; i++) {
city.options[i].text = cityS[i];
}
//二级菜单初始化
area.length = 1;
area.options[0].text = district[0][0];
city.onchange = function () {
let index = city.selectedIndex;
area.length = district[index].length;
for (let i = 0; i < area.length; i++) {
area.options[i].text = district[index][i];
}
}
</script>
</body>
</html>