三级联动思想与二级联动的一样，添加省与市的过程我就不写了，参考原生JS用select标签实现二级联动，就说一下如何添加区
对于区的数组设置，我们需要一个二维数组，拿数组中下标为0的值 来说，从整体上来说，下标为0 的数是一个数组。里面存放的是一个市所包括的所有区的值，不同市所包括的区的值分别放在不同的下标中，
实现思路
1、第一个下标代表的是选择的哪个省
2、第二个下标代表的是选择的哪个市
因此我们在点击省的时候，需要将当前的下标记录在一个全局变量中，在点市的时候，直接获取当前值，两者结合起来就会实现区的动态添加
函数封装
因为动态添加市与区的值是一样的，所以需要封装一个函数，减少代码冗余，但是这个封装不太好写，因为是点击省才有市，点击市才有区，是一层嵌套一层，所在封装一时候，需要判断当前的父节点是省还是市。省的话，当前的下标记录在一个全局变量中，再动态添加市。如果是市，用全局变量加当前点击的下标再动态添加区
代码区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三级联动 </title>
<style>
*{
margin: 0;
padding:0;
}
.clear::after{
content: "";
display: block;
clear: both;
}
.box{
margin: 100px auto;
width: 720px;
}
.left,.right,.last{
width: 32%;
float: left;
}
.left{
margin-right: 2px;
}
.name,.content{
height: 30px;
float: left;
}
.name{
width: 30%;
line-height: 30px;
text-align: center;
margin-right: 1px;
background-color: yellowgreen;
}
.content{
width: 69%;
}
select{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box clear">
<div class="left clear">
<div class='name'>省：</div>
<div class="content"><select class="province" id=""></select></div>
</div>
<div class="right clear">
<div class='name'>市</div>
<div class="content"><select class=" city" id=""></select></div>
</div>
<div class="last clear">
<div class='name'>区</div>
<div class="content"><select class=" county" id=""></select></div>
</div>
</div>
<script>
var provinceContent = document.querySelector('.province');
var cityContent= document.querySelector('.city');
var countyContent = document.querySelector('.county');
// 设置省份城市数组
var province = ['陕西','山西'];
// 设置城市数组
var city = [
["西安","宝鸡","咸阳","渭南"],
["太原","阳泉","晋城"],
]
var county = [ [
['蓝田县','周至县','户县','高陵县'],
['凤翔县','岐山县','扶风县','眉县','陇县','千阳县','麟游县','凤县','太白县'],
['泾阳县','乾县','礼泉县','永寿县','彬县','长武县','旬邑县','淳化县','武功县'],
['华县','潼关县','大荔县','蒲城县','澄城县','白水县','合阳县','富平县']
],
[
['小店区','迎泽区','杏花岭区','尖草坪区','万柏林区','晋源区','清徐县','阳曲县','娄烦县','古交市'],
['城区','矿区','郊区','盂县','平定县'],
['城区','泽州县','阳城县','沁水县','陵川县','高平市']
]
]
// 动态的添加内容元素：
// 当动态添加元素时，首先要明确添加的是哪个数组，以及要给哪个元素添加，
// 因为动态添加元素需要用到好几次，所有封装一个函数，方便以后再次添加元素时调用
// obj表示数组，target表示要给哪个元素添加
function createOption(obj,target){
for(var i = 0; i<obj.length; i++){
var option = document.createElement('option');
option.innerText = obj[i];
target.appendChild(option);
}
}
// 调用执行函数
createOption(province,provinceContent);
getCity();
//当选好省份之后，同时将当前省份对应的市写入市区域中,
var index ;
function getCity(){
// 给省添加绑定事件选中内容
common(provinceContent,cityContent,city);
}
// 当点击省或市之后，动态的添加当前省/市对应的市内容
function common(obj,target,arr){
for(var i = 0; i < obj.children.length; i++){
obj.children[i].value = i;
// 给省//市添加绑定事件选中内容
obj.children[i].addEventListener('click',function(){
// 先判断当前市/区中是否有option，若是有，则删除所有元素再添加
if(target.children.length != 0){
var i = 0;
while(i < target.children.length)
target.removeChild( target.children[0]);
}
// 如果当前的父节点是省,说明是在选择省,所以需要添加市
// 然后将当前点击的省的下标记住,用来添加区
if(this.parentNode == provinceContent){
index = this.value;
createOption(arr[this.value], target);
// 在添加省之后就需要添加市,
getCounty();
}
// 如果当前的父节点是市,说明是在选择市,所以要添加区
//
if(this.parentNode == cityContent){
// arr[index] --- 代表选择的哪个省
// arr[this.value] --- 代表选择的是哪个市
// 所以省与市的下标结合起来就是区的内容
createOption(arr[index][this.value], target);
}
});
}
}
function getCounty(){
common(cityContent,countyContent,county);
}
</script>
</body>
</html>
下面的是未封装的函数码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三级联动 </title>
<style>
*{
margin: 0;
padding:0;
}
.clear::after{
content: "";
display: block;
clear: both;
}
.box{
margin: 100px auto;
width: 720px;
}
.left,.right,.last{
width: 32%;
float: left;
}
.left{
margin-right: 2px;
}
.name,.content{
height: 30px;
float: left;
}
.name{
width: 30%;
line-height: 30px;
text-align: center;
margin-right: 1px;
background-color: yellowgreen;
}
.content{
width: 69%;
}
select{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box clear">
<div class="left clear">
<div class='name'>省：</div>
<div class="content"><select class="province" id=""></select></div>
</div>
<div class="right clear">
<div class='name'>市</div>
<div class="content"><select class=" city" id=""></select></div>
</div>
<div class="last clear">
<div class='name'>区</div>
<div class="content"><select class=" county" id=""></select></div>
</div>
</div>
<script>
var provinceContent = document.querySelector('.province');
var cityContent= document.querySelector('.city');
var countyContent = document.querySelector('.county');
// 设置省份城市数组
var province = ['陕西','山西'];
// 设置城市数组
var city = [
["西安","宝鸡","咸阳","渭南"],
["太原","阳泉","晋城"],
]
var county = [ [
['蓝田县','周至县','户县','高陵县'],
['凤翔县','岐山县','扶风县','眉县','陇县','千阳县','麟游县','凤县','太白县'],
['泾阳县','乾县','礼泉县','永寿县','彬县','长武县','旬邑县','淳化县','武功县'],
['华县','潼关县','大荔县','蒲城县','澄城县','白水县','合阳县','富平县']
],
[
['小店区','迎泽区','杏花岭区','尖草坪区','万柏林区','晋源区','清徐县','阳曲县','娄烦县','古交市'],
['城区','矿区','郊区','盂县','平定县'],
['城区','泽州县','阳城县','沁水县','陵川县','高平市']
]
]
// 动态的添加内容元素：
// 当动态添加元素时，首先要明确添加的是哪个数组，以及要给哪个元素添加，
// 因为动态添加元素需要用到好几次，所有封装一个函数，方便以后再次添加元素时调用
// obj表示数组，target表示要给哪个元素添加
function createOption(obj,target){
for(var i = 0; i<obj.length; i++){
var option = document.createElement('option');
option.innerText = obj[i];
target.appendChild(option);
}
}
// 调用执行函数
createOption(province,provinceContent);
getCity();
//当选好省份之后，同时将当前省份对应的市写入市区域中,
var index ;
function getCity(){
for(var i = 0; i < provinceContent.children.length; i++){
provinceContent.children[i].value = i;
// 给省添加绑定事件选中内容
provinceContent.children[i].addEventListener('click',function(){
// 当点击省之后，动态的添加当前省对应的市内容
// 先判断当前市中是否有option，若是有，则删除所有元素再添加
if(cityContent.children.length != 0){
var i = 0;
while(i < cityContent.children.length)
cityContent.removeChild( cityContent.children[0]);
}
index = this.value;
createOption(city[this.value], cityContent);
getCounty();
});
}
}
function getCounty(){
for(var i = 0; i < cityContent.children.length; i++){
cityContent.children[i].value = i;
// 给省添加绑定事件选中内容
cityContent.children[i].addEventListener('click',function(){
// 当点击省之后，动态的添加当前省对应的市内容
// 先判断当前市中是否有option，若是有，则删除所有元素再添加
if(countyContent.children.length != 0){
var i = 0;
while(i < countyContent.children.length)
countyContent.removeChild( countyContent.children[0]);
}
console.log(this.value);
createOption(county[index][this.value], countyContent);
});
}
}
</script>
</body>
</html>
