省市县三级联动
作者：互联网
省市县三级联动
JavaScript原生代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市县三级联动</title>
</head>
<style>
*{margin: 0;padding: 0;}
.city,.district{display: none;}
</style>
<body>
<div class="container">
省-市-区
<select class="province">
<option value="0">请选择省份</option>
</select>
<select class="city">
<option value="0">请选择城市</option>
</select>
<select class="district">
<option value="0">请选择区/县</option>
</select>
</div>
</body>
<script>
var arr = [{
provinceName: "河北省",
citys: [{
cityName: '石家庄市',
districts: [{
districtName: '桥东区'
}, {
districtName: '桥西区'
}, {
districtName: '桥北区'
}, {
districtName: '桥南区'
}]
}, {
cityName: '邢台市',
districts: [{
districtsName: '桥东区'
}, {
districtName: '桥西区'
}, {
districtName: '桥北区'
}, {
districtName: '桥南区'
}]
}, {
cityName: '邯郸市',
districts: [{
districtsName: '桥东区'
}, {
districtName: '桥西区'
}, {
districtName: '桥北区'
}, {
districtName: '桥南区'
}]
}, {
cityName: '沧州市',
districts: [{
districtsName: '桥东区'
}, {
districtName: '桥西区'
}, {
districtName: '桥北区'
}, {
districtName: '桥南区'
}]
}]
},
{
provinceName: "山东省",
citys: [{
cityName: '菏泽市',
districts: [{
districtName: '曹县'
}, {
districtName: '桥东区'
}, {
districtName: '桥西区'
}]
}, {
cityName: '青岛市',
districts: [{
districtName: '黄岛区'
}, {
districtName: '市南区'
}, {
districtName: '市北区'
}]
}, {
cityName: '德州市',
districts: [{
districtName: '德城区'
}, {
districtName: '陵县'
}, {
districtName: '平原县'
}]
}]
},
{
provinceName: "重庆市",
citys: [{
cityName: '重庆市',
districts: [{
districtName: '石柱县'
}, {
districtName: '渝中区'
}, {
districtName: '南岸区'
},{
districtName:'沙坪坝区'
}]
}]
}];
var province = document.getElementsByClassName("province")[0];
var city = document.getElementsByClassName('city')[0];
var district = document.getElementsByClassName('district')[0];
var provinceName = "";//用于存放省份的变量
for(var i=0;i<arr.length;i++){
var opt = document.createElement('option');
//创建指定文本的按钮你需要在按钮元素后添加文本节点
//语法：document.createElement(nodename)
opt.text=arr[i].provinceName;
province.add(opt,null);
//add() 方法用于向 <select> 添加一个 <option> 元素。
//语法：selectObject.add(option,before)
//option 必需。要添加选项元素。必需是 option 或 optgroup 元素。
//before 必需。在选项数组的该元素之前增加新的元素。如果该参数是null，元素添加到选项数组的末尾。
}
province.onchange = function(){
var cityOpt =document.createElement('option');
city.innerHTML='<option>-=请选择市=-</option>';
//获取省份下拉框选择的内容（省份下拉框的value值）
provinceName=province.value;
//显示市级下拉框
city.style.display="inline";
//从大数组中遍历省份，找到与省份对应的城市列表
for(var i=0;i<arr.length;i++){
//如果选中的省份与数组中的某一个相同，那么显示对应的城市列表
if(arr[i].provinceName==provinceName){
//设置变量cityArr用于存储市级列表
cityArr = arr[i].citys;
///遍历cityArr数组，向城市下拉框中添加option元素
for(var j=0;j<cityArr.length;j++){
var cityOpt =document.createElement('option');
cityOpt.text=cityArr[j].cityName;
city.add(cityOpt,null);
}
}
}
}
city.onchange = function(){
district.innerHTML='<option>请选择区县</option>'
var cityName=city.value;
district.style.display="inline";
for(var i=0;i<arr.length;i++){
if(arr[i].provinceName==provinceName){
for(var j=0;j<arr[i].citys.length;j++){
if(arr[i].citys[j].cityName==cityName){
//设置变量districtArr用于存储市级列表
//districtArr = arr[i].citys[j].districts;
//遍历数组
for(var k=0;k<arr[i].citys[j].districts.length;k++){
var districtOpt = document.createElement("option");
districtOpt.text=arr[i].citys[j].districts[k].districtName;
district.add(districtOpt,null);
}
}
}
}
}
}
</script>
</html>
运行结果如图：
标签：桥东区,city,省市,cityName,districts,联动,districtName,var,三级 来源： https://www.cnblogs.com/198c/p/14814316.html