在这基础上扩展为两个select联动的代码
时间: 2024-05-11 20:14:26 浏览: 12
HTML代码:
```
<select id="province">
<option value="">请选择省份</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangdong">广东</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
```
JavaScript代码:
```
var provinceSelect = document.getElementById('province');
var citySelect = document.getElementById('city');
// 定义省份和城市的关系
var provinceCityMap = {
'beijing': ['北京市'],
'shanghai': ['上海市'],
'guangdong': ['广州市', '深圳市', '珠海市']
};
// 监听省份选择变化事件
provinceSelect.addEventListener('change', function() {
var province = this.value; // 获取选择的省份
var cities = provinceCityMap[province]; // 获取该省份的城市列表
// 清空城市选择框的选项
citySelect.innerHTML = '<option value="">请选择城市</option>';
// 遍历城市列表,添加选项
for (var i = 0; i < cities.length; i++) {
var city = cities[i];
var option = document.createElement('option');
option.value = city;
option.text = city;
citySelect.appendChild(option);
}
});
```
在这个例子中,我们增加了一个城市选择框,并且通过JavaScript代码,实现了省份和城市的联动。当用户选择一个省份时,城市选择框会自动更新为该省份的城市列表。
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![iso](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.png)