JS 原生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<select name="" id="select1"></select>
<select name="" id="select2"></select>
<select name="" id="select3"></select>
</body>
</html>
<script src="./area.js"></script> //引入外部省 市 区文件
<script>
// 1先将省 市 区 分别显示在页面上 在页面加载完成后显示 会有一个默认值(默认值是第一个值)
var sele = document.querySelectorAll("select");
// sele[0] == 第一个下拉框
// sele[1] == 第二个 sele[2] == 第三个
// 获取一个省 data[0].name == 第一个省份 data[i].name == 所有省份
// 遇见数组foreach 遇见对象forin
// 3.1声明一个空字符串为了在循环内获取option加省分内容的标签
var prov = "";
// 2获取所有省份
data.forEach(function (item) {
// 2.1item == data[0]&&data[1].... == 数组内所有元素 == data内每个对象
// console.log(item.name);
// 通过string拼接创建一个标签
// 3.prov += "<option value='"+item.name+"'>"+item.name+"</option>"
// ``${} 只是字符串提供的一种新的拼接方式 是es6语法
// 3.
prov += `<option value="${item.name}">${item.name}</option>`;
// 3.通过dom方法创建标签 给标签设置内容和属性 添加到第一个下拉框内
// var option = document.createElement("option");
// option.innerText = item.name;
// option.value = item.name;
// sele[0].appendChild(option);
})
// 3.2在循环结束后得到的是所有的省份信息填写如option内的总和
// console.log(prov);
// 3.3将装载省份的标签添加到sele[0]内
sele[0].innerHTML = prov;
// 4.首先获取一个city 设置市的内容
// data[0].city == [{name:"市"},{name:"市"},{name:"市"}]
// 6.当第一个下一框内容发生更改时触发
sele[0].onchange = function () {
// 获取选中option的索引值
// console.log(this.selectedIndex);
// 根据选中option的索引值来重新设置市的内容
// var city = "";
// data[this.selectedIndex].city.forEach(function (item) {
// city += `<option value="${item.name}">${item.name}</option>`;
// })
// sele[1].innerHTML = city
// 8.调用函数 根据第一个下拉框的索引值来对应的获取市然后显示在页面上
cityFun(this.selectedIndex)
// 13. 当省发生更改的时候同时在设置区的内容更改 更改为当前省下的第一个市所对应的区
areaFun(this.selectedIndex,0)
}
// 5.设置第二个下拉框的初始值 值在第一个省份下拉框更改时 会随着更改
// 7.因为设置市会多次执行所以使用函数封装
function cityFun(i) {
var city = "";
data[i].city.forEach(function (item) {
city += `<option value="${item.name}">${item.name}</option>`;
})
sele[1].innerHTML = city
}
cityFun(0)
// 10.设置市更改的时候让区的值跟着更改 手动操作市的时候
sele[1].onchange = function () {
// console.log("===");
// console.log(sele[0].selectedIndex,sele[1].selectedIndex)
// 12.调用的时候 让区根据当前省的下拉索引值和市的下拉索引值来获取相关的区 显示在页面上
areaFun(sele[0].selectedIndex,sele[1].selectedIndex)
}
// 9.获取默认显示的第一个省的第一个市内的区 data[0].city[0].area == ["区1","区2","区3"...]
// 11.因为区是在省或者市发生变化的时候都需要更改 所以函数封装一下
function areaFun(a,b) {
var area = "";
data[a].city[b].area.forEach(function (item) {
area += `<option value="${item}">${item}</option>`;
})
sele[2].innerHTML = area;
}
// 初始先调用执行一次
areaFun(0,0);
</script>jquery 三级联动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./area.js"></script>
<script src="./jquery.min.js"></script>
</head>
<body>
<select name="province" id="province">
</select>
<select name="city" id="city">
</select>
<select name="area" id="area">
</select>
<script>
var str = '';
for(var i = 0;i<data.length;i++){//遍历data,将每个省份添加到省的select框中
str += '<option value="'+i+'">'+data[i].name+'</option>';//value对应option里的内容在data里的索引
}
$('#province').html(str);
var str = '';
for(var i =0;i<data[0].city.length;i++){//遍历当前显示的省份对应的城市的数组,把城市名添加到市的select框中
str += '<option value="'+i+'">'+data[0].city[i].name+'</option>';
}
$('#city').html(str);
var str = '';
for(var i =0;i<data[0].city[0].area.length;i++){//遍历当前显示的省份及城市对应的区县的数组,把区县名添加到区县的select框中
str += '<option value="'+i+'">'+data[0].city[0].area[i]+'</option>';
}
$('#area').html(str);
$('#province').change(function(){
var index = $('#province').val();
var str = '';
for(var i =0;i<data[index].city.length;i++){//遍历当前显示的省份对应的城市的数组,把城市名添加到市的select框中
str += '<option value="'+i+'">'+data[index].city[i].name+'</option>';
}
$('#city').html(str);
$('#city').trigger('change');//手动触发city的change事件
})
$('#city').change(function(){
var index1 = $('#province').val();
var index2 = $('#city').val();
var str = '';
for(var i =0;i<data[index1].city[index2].area.length;i++){//遍历当前显示的省份及城市对应的区县的数组,把区县名添加到区县的select框中
str += '<option value="'+i+'">'+data[index1].city[index2].area[i]+'</option>';
}
$('#area').html(str);
})
</script>
</body>
</html>jquery封装：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./area.js"></script>
<script src="./jquery.min.js"></script>
</head>
<body>
<select name="province" id="province">
</select>
<select name="city" id="city">
</select>
<select name="area" id="area">
</select>
<script>
function change(source,dom){
var str = '';
if(typeof source[0] == 'object'){
for(var i = 0;i<source.length;i++){
str += '<option value="'+i+'">'+source[i].name+'</option>';
}
}else{
for(var i = 0;i<source.length;i++){
str += '<option value="'+i+'">'+source[i]+'</option>';
}
}
$(dom).html(str);
}
change(data,'#province');
change(data[0].city,'#city');
change(data[0].city[0].area,'#area');
$('#province').change(function(){
var index = $('#province').val();
change(data[index].city,'#city');
$('#city').trigger('change');//手动触发city的change事件
})
$('#city').change(function(){
var index1 = $('#province').val();
var index2 = $('#city').val();
change(data[index1].city[index2].area,'#area')
})
</script>
</body>
</html>