html中免费的四级联动,利用JS实现省市区街道四级联动插件
时间: 2023-10-22 14:08:50 浏览: 46
以下是一个简单的四级联动实现示例,使用 HTML、CSS 和 JavaScript:
HTML 代码:
```html
<div>
<label for="province">省份:</label>
<select id="province"></select>
</div>
<div>
<label for="city">城市:</label>
<select id="city"></select>
</div>
<div>
<label for="district">区县:</label>
<select id="district"></select>
</div>
<div>
<label for="street">街道:</label>
<select id="street"></select>
</div>
```
JavaScript 代码:
```javascript
// 定义省份、城市、区县、街道数据
var data = {
"北京市": {
"市辖区": {
"东城区": {},
"西城区": {},
"朝阳区": {},
"丰台区": {},
"石景山区": {},
"海淀区": {},
"门头沟区": {},
"房山区": {},
"通州区": {},
"顺义区": {},
"昌平区": {},
"大兴区": {},
"怀柔区": {},
"平谷区": {},
"密云区": {},
"延庆区": {}
}
},
"上海市": {
"市辖区": {
"黄浦区": {},
"徐汇区": {},
"长宁区": {},
"静安区": {},
"普陀区": {},
"虹口区": {},
"杨浦区": {},
"闵行区": {},
"宝山区": {},
"嘉定区": {},
"浦东新区": {},
"金山区": {},
"松江区": {},
"青浦区": {},
"奉贤区": {}
}
}
// 根据需要添加更多数据
};
// 获取省份、城市、区县、街道的 select 元素
var province = document.getElementById("province");
var city = document.getElementById("city");
var district = document.getElementById("district");
var street = document.getElementById("street");
// 初始化省份数据
for (var p in data) {
var option = document.createElement("option");
option.value = p;
option.innerHTML = p;
province.appendChild(option);
}
// 省份 select 元素的 onchange 事件处理函数
province.onchange = function() {
// 清空城市、区县、街道 select 元素的选项
city.innerHTML = "";
district.innerHTML = "";
street.innerHTML = "";
// 获取选中的省份名称
var p = this.value;
// 如果省份名称存在于数据中,则初始化城市 select 元素的选项
if (p in data) {
for (var c in data[p]) {
var option = document.createElement("option");
option.value = c;
option.innerHTML = c;
city.appendChild(option);
}
}
};
// 城市 select 元素的 onchange 事件处理函数
city.onchange = function() {
// 清空区县、街道 select 元素的选项
district.innerHTML = "";
street.innerHTML = "";
// 获取选中的省份名称和城市名称
var p = province.value;
var c = this.value;
// 如果省份和城市名称都存在于数据中,则初始化区县 select 元素的选项
if (p in data && c in data[p]) {
for (var d in data[p][c]) {
var option = document.createElement("option");
option.value = d;
option.innerHTML = d;
district.appendChild(option);
}
}
};
// 区县 select 元素的 onchange 事件处理函数
district.onchange = function() {
// 清空街道 select 元素的选项
street.innerHTML = "";
// 获取选中的省份名称、城市名称和区县名称
var p = province.value;
var c = city.value;
var d = this.value;
// 如果省份、城市和区县名称都存在于数据中,则初始化街道 select 元素的选项
if (p in data && c in data[p] && d in data[p][c]) {
for (var s in data[p][c][d]) {
var option = document.createElement("option");
option.value = s;
option.innerHTML = s;
street.appendChild(option);
}
}
};
```
CSS 代码:
```css
label {
display: inline-block;
width: 80px;
text-align: right;
margin-right: 10px;
}
select {
width: 200px;
margin-right: 20px;
}
```
将以上代码复制到 HTML 文件中,即可实现简单的省市区街道四级联动插件。需要注意的是,以上示例只是一个简单的实现,实际使用时需要根据具体需求进行修改和优化。