写一个实现下面这三个li标签内的select标签内的数据三级联动的js代码:
时间: 2023-12-06 15:44:47 浏览: 131
js实现三级联动代码
HTML代码示例:
```html
<ul>
<li>
<select id="province">
<option value="">请选择省份</option>
<option value="1">广东省</option>
<option value="2">湖南省</option>
<option value="3">浙江省</option>
</select>
</li>
<li>
<select id="city">
<option value="">请选择城市</option>
</select>
</li>
<li>
<select id="district">
<option value="">请选择区县</option>
</select>
</li>
</ul>
```
JavaScript代码示例:
```javascript
// 省市区数据
var data = {
'广东省': {
'广州市': ['天河区', '海珠区', '荔湾区'],
'深圳市': ['福田区', '南山区', '罗湖区'],
'珠海市': ['香洲区', '金湾区', '斗门区']
},
'湖南省': {
'长沙市': ['芙蓉区', '天心区', '雨花区'],
'株洲市': ['荷塘区', '芦淞区', '石峰区'],
'衡阳市': ['珠晖区', '石鼓区', '蒸湘区']
},
'浙江省': {
'杭州市': ['西湖区', '余杭区', '拱墅区'],
'宁波市': ['海曙区', '江东区', '江北区'],
'温州市': ['鹿城区', '龙湾区', '瓯海区']
}
};
// 获取省份、城市、区县的select元素
var province = document.getElementById('province');
var city = document.getElementById('city');
var district = document.getElementById('district');
// 初始化省份数据
for (var key in data) {
var option = document.createElement('option');
option.value = key;
option.innerHTML = key;
province.appendChild(option);
}
// 当省份选择改变时,更新城市数据
province.onchange = function() {
// 清空城市和区县的数据
city.innerHTML = '<option value="">请选择城市</option>';
district.innerHTML = '<option value="">请选择区县</option>';
// 如果选择了省份,则显示该省份下的城市数据
if (this.value) {
for (var key in data[this.value]) {
var option = document.createElement('option');
option.value = key;
option.innerHTML = key;
city.appendChild(option);
}
}
};
// 当城市选择改变时,更新区县数据
city.onchange = function() {
// 清空区县的数据
district.innerHTML = '<option value="">请选择区县</option>';
// 如果选择了城市,则显示该城市下的区县数据
if (this.value) {
for (var i = 0; i < data[province.value][this.value].length; i++) {
var option = document.createElement('option');
option.value = data[province.value][this.value][i];
option.innerHTML = data[province.value][this.value][i];
district.appendChild(option);
}
}
};
```
实现思路:
1. 定义一个存储省市区数据的对象 `data`;
2. 获取省份、城市、区县的select元素;
3. 初始化省份数据,将所有省份作为option添加到省份的select元素中;
4. 当省份选择改变时,清空城市和区县的select元素,如果选择了省份,则将该省份下的所有城市作为option添加到城市的select元素中;
5. 当城市选择改变时,清空区县的select元素,如果选择了城市,则将该城市下的所有区县作为option添加到区县的select元素中。
阅读全文