用js写两个省、市、县三级联动表单
时间: 2023-05-22 21:03:38 浏览: 66
非常感谢您的问题!以下是用JS编写两个省市县三级联动表单的代码:
HTML部分:
```
<label>请选择省份:</label>
<select id="province" name="province">
<option value="">请选择</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广东">广东</option>
<option value="江苏">江苏</option>
<option value="浙江">浙江</option>
</select>
<label>请选择城市:</label>
<select id="city" name="city">
<option value="">请选择</option>
</select>
<label>请选择县/区:</label>
<select id="region" name="region">
<option value="">请选择</option>
</select>
```
JS部分:
```
// 定义省市县数据
var regions = {
"北京": {
"市辖区": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区"],
},
"上海": {
"市辖区": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "南汇区"],
},
"广东": {
"广州市": ["荔湾区", "越秀区", "海珠区", "天河区", "白云区", "黄埔区", "番禺区", "花都区", "南沙区", "从化区", "增城区"],
"深圳市": ["福田区", "罗湖区", "南山区", "宝安区", "龙岗区", "盐田区"],
},
"江苏": {
"南京市": ["玄武区", "白下区", "秦淮区", "建邺区", "鼓楼区", "下关区", "浦口区", "栖霞区", "雨花台区", "江宁区", "六合区", "溧水区", "高淳区"],
"无锡市": ["崇安区", "南长区", "北塘区", "锡山区", "惠山区", "滨湖区", "江阴市", "宜兴市"],
},
"浙江": {
"杭州市": ["上城区", "下城区", "江干区", "拱墅区", "西湖区", "滨江区", "萧山区", "余杭区", "富阳区", "临安市", "桐庐县", "淳安县"],
"宁波市": ["海曙区", "江东区", "江北区", "北仑区", "镇海区", "鄞州区", "余姚市", "慈溪市", "奉化市", "宁海县", "象山县"],
},
};
// 初始化省份数据
var province = document.getElementById("province");
for (var key in regions) {
var option = document.createElement("option");
option.value = key;
option.innerHTML = key;
province.appendChild(option);
}
// 城市和县/区联动
province.onchange = function() {
var city = document.getElementById("city");
var region = document.getElementById("region");
var provinceVal = this.value;
var cityHtml = "";
var regionHtml = "";
if (provinceVal != "") {
var cityData = regions[provinceVal];
for (var key in cityData) {
var option = document.createElement("option");
option.value = key;
option.innerHTML = key;
cityHtml += option.outerHTML;
}
}
city.innerHTML = cityHtml;
region.innerHTML = regionHtml;
};
var city = document.getElementById("city");
city.onchange = function() {
var region = document.getElementById("region");
var provinceVal = document.getElementById("province").value;
var cityVal = this.value;
var regionHtml = "";
if (cityVal != "") {
var regionData = regions[provinceVal][cityVal];
for (var i = 0; i < regionData.length; i++) {
var option = document.createElement("option");
option.value = regionData[i];
option.innerHTML = regionData[i];
regionHtml += option.outerHTML;
}
}
region.innerHTML = regionHtml;
};
```
希望这个代码对您有所帮助!