知识点:
1. json.parse() 将json格式字符串转换成对象。json.stringify()将对象转换成json格式字符串。
2. 重要属性selectedIndex:返回下拉列表的被选选项的索引号。
3. onchange事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
<select id="province">
<!-- <option>北京</option>
<option>天津</option> -->
</select>
<select id="city"></select>
<select id="count"></select>
<script type="text/javascript" src="china.js"></script>
<script type="text/javascript">
var province = document.getElementById("province");
var city = document.getElementById("city");
var count = document.getElementById("count");
var chinaArea = JSON.parse(chinaArea);//将字符串格式的json数据转换成对象
// var chinaArea = eval("("+chinaArea+")");
// var chinaArea = new Function("return " + chinaArea)();
//1.遍历省份
var provinceList = chinaArea.china.province;//数组
for(var i = 0 ; i < provinceList.length; i++) {
var option = document.createElement("option");
option.innerHTML = provinceList[i]["-name"];
province.appendChild(option);
}
province.onchange = function() {
//选择省份之后,市区跟着变化
cityData();
countData();
}
cityData();
//市区的数据填充
var sIndex = 0;
var cityIndex = 0;
function cityData() {
//清除原来的市区信息
city.innerHTML = "";
//2.遍历市区
sIndex = province.selectedIndex;//设置或返回下拉列表备选选项的索引号。
for(var j = 0; j < provinceList[sIndex].city.length;j++) {
var option = document.createElement("option");
option.innerHTML = provinceList[sIndex].city[j]["-name"];
city.appendChild(option);
}
}
//县区数据填充
function countData() {
//清除原来的县区信息
count.innerHTML = "";
//
cityIndex = city.selectedIndex;
var countList = chinaArea.china.province[sIndex].city[cityIndex].county;
for(var k = 0; k < countList.length; k++) {
var option = document.createElement("option");
option.innerHTML = countList[k]["-name"];
count.appendChild(option);
}
}
city.onchange = function() {
countData();
}
countData();
</script>
</body>
</html>
可以通过以下连接获取china.js文件
https://pan.baidu.com/s/1geIYTW3