首先我们需要从网上下载一个全国城市三级联动json数据格式的js文件,可能我这里的数据文件有所不同,但是写法基本都是一样的。
首先在HTML中将所需要的页面结构搭建好:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<script src="city-data.js"></script>
</head>
<body>
省:<select id="province">
<option value="">---请选择---</option>
</select>
市:<select id="city">
<option value="">---请选择---</option>
</select>
区:<select id="area">
<option value="">---请选择---</option>
</select>
</body>
</html>
接着就是直接上js代码,具体注释都有讲解:
var province = document.getElementById('province'); //获取省级select选择下拉框
var newcity = document.getElementById('city'); //获取市级select选择下拉框
var area = document.getElementById('area'); //获取区级select选择下拉框
var soncity; //定义一个变量用来存放市
var date = city[0]; //将下载好的全国城市三级联动json数据赋值给date这个变量
for(var p in date){ //用for-in循环来遍历date中的第一层数据(省级)
var pro_option = new Option(date[p].name,p); //实例化,date[p].name为文本值,p为value值
province.appendChild(pro_option); //将实例化的每一条数据动态添加到省级选择下拉框中
}
province.onchange = function(){ //当省级下拉框中的值发生改变时触发这个函数,执行其中的代码
newcity.options.length = 1; //城市选择的长度变为1个
var pros = this.value; //把当前省份的值提取出来
soncity = date[pros].child; //把市拿出来
for(var c in soncity){
var ctiy_option = new Option(soncity[c].name,c); //实例化,date[c].name为文本值,c为value值
newcity.appendChild(ctiy_option); //将实例化的每一条数据动态添加到市级选择下拉框中
}
}
newcity.onchange = function(){ //当市级下拉框中的值发生改变时触发这个函数,执行其中的代码
area.options.length = 1; //区的选择的长度变为1个
var cit = this.value; //把当前市的值提取出来
sonarea = soncity[cit].child; //把区拿出来
for(var a in sonarea){
var area_option = new Option(sonarea[a],a) //实例化,date[a]为文本值,a为value值
area.appendChild(area_option); //将实例化的每一条数据动态添加到区级选择下拉框中
}
}