原生js省市县三级联动
时间: 2023-08-20 20:02:21 浏览: 56
原生JavaScript实现省市县三级联动的方法如下:
首先,需要准备好省市县的数据。可以通过JSON格式的数据来表示,比如:
```javascript
var data = {
"province": [
{
"name": "省份1",
"cities": [
{
"name": "城市1",
"counties": ["县1", "县2", "县3"]
},
{
"name": "城市2",
"counties": ["县4", "县5", "县6"]
}
]
},
{
"name": "省份2",
"cities": [
{
"name": "城市3",
"counties": ["县7", "县8", "县9"]
},
{
"name": "城市4",
"counties": ["县10", "县11", "县12"]
}
]
}
]
};
```
然后,在HTML中添加三个select元素作为下拉框,分别表示省、市、县:
```html
<select id="province"></select>
<select id="city"></select>
<select id="county"></select>
```
接下来,通过JavaScript将省份数据加载到省份下拉框中:
```javascript
var provinceSelect = document.getElementById("province");
for (var i = 0; i < data.province.length; i++) {
var option = document.createElement("option");
option.text = data.province[i].name;
provinceSelect.add(option);
}
```
通过监听省份下拉框的change事件,根据选中的省份,动态加载对应的城市数据到城市下拉框:
```javascript
var citySelect = document.getElementById("city");
provinceSelect.addEventListener("change", function() {
var cities = data.province[provinceSelect.selectedIndex].cities;
citySelect.innerHTML = ""; // 清空城市下拉框
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");
option.text = cities[i].name;
citySelect.add(option);
}
});
```
最后,再根据选中的城市,动态加载对应的县区数据到县区下拉框:
```javascript
var countySelect = document.getElementById("county");
citySelect.addEventListener("change", function() {
var counties = data.province[provinceSelect.selectedIndex].cities[citySelect.selectedIndex].counties;
countySelect.innerHTML = ""; // 清空县区下拉框
for (var i = 0; i < counties.length; i++) {
var option = document.createElement("option");
option.text = counties[i];
countySelect.add(option);
}
});
```
以上就是原生JavaScript实现省市县三级联动的简单示例。当省份或城市改变时,会动态加载对应的数据到下拉框中,实现了三级联动的效果。