二级联动菜单 JavaScript
Posted 霜序0.2℃
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了二级联动菜单 JavaScript相关的知识，希望对你有一定的参考价值。
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>
以上是关于二级联动菜单 JavaScript的主要内容，如果未能解决你的问题，请参考以下文章