用js实现省市二级联动
时间: 2023-05-22 12:06:06 浏览: 70
好的,我可以回答您的问题。以下是用 JavaScript 实现省市二级联动的示例代码:
```javascript
// 省份下拉列表
var provinceList = document.getElementById("province-list");
// 城市下拉列表
var cityList = document.getElementById("city-list");
// 省份和城市的数据
var data = {
"北京市": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"],
"上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"],
"广东省": ["广州市", "深圳市", "珠海市", "汕头市", "韶关市", "佛山市", "江门市", "湛江市", "茂名市", "肇庆市", "惠州市", "梅州市", "汕尾市", "河源市", "阳江市", "清远市", "东莞市", "中山市", "潮州市", "揭阳市", "云浮市"],
// 其它省份的数据...
};
// 根据省份生成城市选项
function generateCityOptions(cityArr) {
var optionsHtml = "";
for (var i = 0; i < cityArr.length; i++) {
var city = cityArr[i];
optionsHtml += "<option value='" + city + "'>" + city + "</option>";
}
return optionsHtml;
}
// 当选择的省份变化时,更新城市列表
function updateCityList() {
var selectedProvince = provinceList.value;
var cityArr = data[selectedProvince];
var optionsHtml = generateCityOptions(cityArr);
cityList.innerHTML = optionsHtml;
}
// 初始化省份列表
var provinceOptionsHtml = generateCityOptions(Object.keys(data));
provinceList.innerHTML = provinceOptionsHtml;
// 绑定省份选择器的 change 事件
provinceList.addEventListener("change", updateCityList);
```
这段代码可以生成两个下拉列表,第一个是省份的选择列表,第二个是根据选中的省份动态生成的城市选择列表。您可以将其嵌入到您的网页中使用。
希望这些能对您有所帮助。