JavaScript实现下拉框联动
目标：
根据address.js中的topID实现下拉框联动，点击省出现对应的市，点击市显示对应的区
address.js下载链接，提取码：ws87，链接生效了可以联系我哦，本案例有小bug，不过无伤大雅
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>下拉框联动</title><script src="js/address.js"></script><style>.box {margin: 100px auto;width: 500px;height: 100px;background-color: pink;line-height: 70px;text-align: center;}.box select {width: 80px;}</style>
</head>
<body>
<div class="box">省：<select id="province"></select>市：<select id="city"></select>区：<select id="region"></select>
</div><script type="text/javascript">let province = document.querySelector("#province"),city = document.querySelector("#city"),region = document.querySelector("#region"),str1 = "", str2 = "", str3 = "";/* 初始化select列表* @param m* @param n* @param address* @return {string} 返回拼接字符串*/const init = (m, n, address) => {let str = "";for (let i = m; i <= n; i++) {for (const addressValue of address) {if (addressValue.topId === i) {str += `<option value="${addressValue.id}">${addressValue.addName}</option>`;}}}return str;}/* 拼接option标签* @param city* @param address* @return {string} 返回拼接字符串*/const getCityString = (type, address) => {//拿到选中项的索引let index = type.selectedIndex;//拿到选中项options的valuelet typeID = type.options[index].value;str = "";for (const adds of address) {if (adds.topId == typeID) {str += `<option value="${adds.id}">${adds.addName}</option>`;}}return str;}province.innerHTML = init(0, 0, address);city.innerHTML = init(1, 26, address);region.innerHTML = init(27, 373, address);//省的点击事件province.onchange = () => {city.innerHTML = getCityString(province, address);}//市的点击事件city.onchange = () => {region.innerHTML = getCityString(city, address);}</script>
</body>
</html>
