js 写一个 级联选择器
时间: 2024-05-29 17:04:13 浏览: 16
好的,下面是一个简单的级联选择器的示例代码:
HTML代码:
```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>
<select id="district">
<option value="">请选择区域</option>
</select>
```
JS代码:
```javascript
// 城市数据
var cityData = {
beijing: {
name: '北京',
districts: ['东城区', '西城区', '朝阳区', '海淀区']
},
shanghai: {
name: '上海',
districts: ['黄浦区', '徐汇区', '静安区', '浦东新区']
},
guangdong: {
name: '广东',
districts: ['广州市', '深圳市', '珠海市', '汕头市']
}
};
// 级联选择器
var provinceSelect = document.getElementById('province');
var citySelect = document.getElementById('city');
var districtSelect = document.getElementById('district');
provinceSelect.addEventListener('change', function() {
// 清空城市和区域选项
citySelect.innerHTML = '<option value="">请选择城市</option>';
districtSelect.innerHTML = '<option value="">请选择区域</option>';
// 获取当前选中的省份
var province = this.value;
// 如果省份为空,则不处理
if (!province) {
return;
}
// 根据省份设置城市选项
var cities = cityData[province].districts;
for (var i = 0; i < cities.length; i++) {
var city = cities[i];
var option = document.createElement('option');
option.value = city;
option.innerHTML = city;
citySelect.appendChild(option);
}
});
citySelect.addEventListener('change', function() {
// 清空区域选项
districtSelect.innerHTML = '<option value="">请选择区域</option>';
// 获取当前选中的城市
var city = this.value;
// 如果城市为空,则不处理
if (!city) {
return;
}
// 根据城市设置区域选项
var districts = cityData[provinceSelect.value].districts;
for (var i = 0; i < districts.length; i++) {
var district = districts[i];
var option = document.createElement('option');
option.value = district;
option.innerHTML = district;
districtSelect.appendChild(option);
}
});
// 初次加载时触发省份选项的change事件
provinceSelect.dispatchEvent(new Event('change'));
```
这个级联选择器可以根据选择的省份和城市显示对应的区域选项。需要注意的是,这个示例只是一个简单的实现,实际应用中需要根据业务需求进行修改和完善。
相关推荐
![](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)
![](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)