原生JS用select标签实现二级联动的思路
1、需要设置一个省数组，还有一个市数组，
2、 页面一加载时，我们需要动态的给省区域创建元素，
3、当选中其中一个省份时，同时需要将其省份对应的市动态的添加市的内容区域中，
这样一个二级联动就实现了
当动态添加元素时需要注意的点：
1、 首先要明确添加的是哪个数组，
2 、以及要给哪个元素添加，
3、因为动态添加元素需要用到好几次，所有封装一个函数，方便以后再次添加元素时调用
当选中其中一个省份或者是一个市时要注意的点
既然是点击，就肯定会用到点击事件，所以此时这个事件是一个异步的加载机制，所以点击事件之后的一系列操作都要写在这个事件里面，
比如点击一个省之后要取当前点击的div的值并将值存在显示标签中，之后就是关闭当前的省区域，再次当前省对应的市动态添加…,如果不写在监听事件里面，这些操作都无法完成，因为在点击一个省之后取到当前省的的值是一个空值
点击省之后添加市时要注意的点
在每次点击省之后添加市时，都要判断当前的市内容区域中否有以前点击省之后添加的市，如果有，则需加删除所有的内容，再动态的添加当前点击省所对应的市
效果图（视频加载可能有点慢哦）
原生js实现二级联动
代码实现
<!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: 480px;
}
.left,.right{
width: 49%;
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>
<script>
// 设置省份城市数组
var province = ['陕西','山西','江苏','河北','吉林'];
// 设置城市数组
var city = [
["西安","汉中"，"渭南"，"安康","宝鸡","咸阳","延安"，"榆林","商洛","铜川","韩城"],
["太原","临汾","运城","长治","阳泉","大同","吕梁""晋城","晋中","朔州","忻州",],
["南京","苏州","无锡","连云港","扬州","太仓","吴县","徐州","常州","昆山","南通","宜兴","镇江","淮安","常熟","盐城","泰州","宿迁"],
["郑州","濮阳","许昌","焦作","鹤壁","新乡","漯河","三门峡","开封","洛阳","平顶山","安阳","南阳","商丘","信阳","周口","驻马店"],
["长春","吉林","白山","四平","辽源","大安","通化"]
]
// 动态的添加内容元素：
// 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();
//当选好省份之后，同时将当前省份对应的市写入市区域中,
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]);
}
createOption(city[this.value], cityContent);
});
}
}
</script>
</body>
</html>
