（2）function loadProv() {}，此函数实现了初始化页面加载数据的功能。
（3）var prov = document.getElementById("prov")，获取存放省份的select下拉菜单。
（4）for (var key in provs)，遍历json结构数据。
（5）var provName = key，获取省份的名称。
（6）var optProv = document.createElement("option")，创建一个option元素对象。
（7）optProv.value = provName，设置option元素的value属性值。
（8）optProv.innerText = provName，设置option显示的文本内容。
（9）prov.appendChild(optProv)，将option元素添加到select下拉菜单。
（10）function provChange() {}，作为onchange事件处理函数。
（11）var prov = document.getElementById("prov"),获取省份下拉菜单。
（12）var city = document.getElementById("city"),获取城市下拉菜单。
（13）var provName = prov.value，获取当前选中的省份的value值。
（14）if (provName == "none") {
city.style.display = "none"
return
}，如果值等于none，说明选中的是第一项，那么城市下拉菜单还是具有隐藏状态，并跳出函数。
（15）else {
city.style.display = ""
},否则的话显示出城市下拉菜单，默认状态它是隐藏的。
（16）var citys = provs[provName]，获取城市，citys是个数组。
（17）for (var index = city.childNodes.length - 1index >= 0index--) {
var child = city.childNodes[index]
city.removeChild(child)
}，遍历城市下拉菜单下的option元素，然后删除这些元素。
之所以清空就是为了防止当再次加载的时候出现累加情况。
（18）for (var index = 0index <citys.lengthindex++) {}，遍历数组中的元素，也就是城市。
（19）var optCity = document.createElement("option")，创建option元素。
（20）optCity.value = citys[index]，设置option元素的value值。
（21）optCity.innerText = citys[index]，设置option元素的文本内容。
（22）city.appendChild(optCity)，将option元素添加select下拉菜单。
数据表形式数据
json形式数据
源码里面要记得放省事等数据 要json的格式<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市区三级联动</title>
</head>
<body>
<form>
<select id="province">
<option>请选择省份</option>
</select>
<select id="city">
<option>请选择城市</option>
</select>
<select id="district">
<option>请选择区域</option>
</select>
</form>
<script src="json.js"></script>
<script type="text/javascript">
var proData = [],
cityData = [],
distData = []
var proSelect = document.getElementById("province"),
citySelect = document.getElementById("city"),
districtSelect = document.getElementById("district")
var curPro = "",
curCity = ""
// 封装更新选择列表函数
function fillselect(select,list){
for (var i = select.length-1i >0 i--){
select.remove(i)
}
list.forEach(function(data){
var option = new Option(data.name, data.sheng)
option.dataset.di = data.di
select.add(option)
})
}
// 将数据按省、市、地区分别存储
dataJson.forEach(function(data){
if (data.level === 1){
proData.push(data)
}
if (data.level === 2){
cityData.push(data)
}
if (data.level === 3){
distData.push(data)
}
})
fillselect(proSelect,proData)
// 监听一级省份选择列表change事件，更新二级城市列表
proSelect.addEventListener("change",function(event){
var val = event.target.value
var list = []
cityData.forEach(function(d){
if (d.sheng === val) {
list.push(d)
}
})
fillselect(citySelect,list)
})
// 监听二级城市选择列表change事件，更新三级区域列表
citySelect.addEventListener("change",function(event){
var val = event.target.value
var curIndex = event.target.selectedIndex
curCity = event.target[curIndex].dataset.di
console.log(event.target,curCity)
var list = []
distData.forEach(function(d){
if (d.di === curCity &&d.sheng === val) {
list.push(d)
}
})
fillselect(districtSelect,list)
})
</script>
</body>
</html>
