三级联动城市数据来自:四月四日梦:中国城市三级联动数据
运行效果
源代码
index.html
<!-- /*
* @Author: Chauncey Yuan
* @Date: 2019-08-15 19:23:45
* @Last Modified by: Chauncey Yuan
* @Last Modified time: 2019-08-15 19:23:45
*/ -->
<!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>三级联动</title>
</head>
<body>
<!-- 直辖市、省的下拉框 -->
<select name="provinces" id="provinces">
</select>
<!-- 直辖市、地级市的下拉框 -->
<select name="cities" id="cities">
</select>
<!-- 区、县的下拉框 -->
<select name="counties" id="counties">
</select>
<!-- 网友提供的中国城市三级联动数据 -->
<script src="js/cities.js"></script>
<!-- 基本算法 -->
<script src="js/index.js"></script>
</body>
</html>
index.js
// /*
// * @Author: Chauncey Yuan
// * @Date: 2019-08-15 19:27:25
// * @Last Modified by: Chauncey Yuan
// * @Last Modified time: 2019-08-15 19:27:25
// */
//获取显示直辖市、省的下拉框
var provincesSel = document.getElementById("provinces");
//获取直辖市、地级市的下拉框
var citiesSel = document.getElementById("cities");
//获取区、县的下拉框
var countiesSel = document.getElementById("counties");
// 默认设置为请选择选项
provincesSel.innerHTML = "<option>-请选择-</option>";
citiesSel.innerHTML = "<option>-请选择-</option>";
countiesSel.innerHTML = "<option>-请选择-</option>";
// 循环遍历城市列表
for (var i = 0; i < cityData.length; i++) {
// 将城市列表中的每个元素的text和value作为参数,生成新的option项
var opt = new Option(cityData[i].text, cityData[i].value);
// 将新生成的option加入到直辖市、省的下拉框中
provincesSel.appendChild(opt);
}
// 为直辖市、省的下拉框加入onchange事件
provincesSel.onchange = function() {
// 每次改变身份选项后,地级市级和县级下拉框内容清空,设置为“请选择”
citiesSel.innerHTML = "<option>-请选择-</option>";
countiesSel.innerHTML = "<option>-请选择-</option>";
// 获取当前被选中的option的下标,-1是为了清除加了“请选择”带来的影响
var a = this.selectedIndex - 1;
// 循环遍历城市列表
for (var j = 0; j < cityData[a].children.length; j++) {
// 将城市列表中的第a个元素的每个children的text和value作为参数,生成新的option项
var opt = new Option(cityData[a].children[j].text, cityData[a].children[j].value);
// 将新生成的option加入到地级市的下拉框中
citiesSel.appendChild(opt);
}
// 为地级市的下拉框加入onchange事件
citiesSel.onchange = function() {
// 每次改变身份选项后,县级下拉框内容清空,设置为“请选择”
countiesSel.innerHTML = "<option>-请选择-</option>";
// 获取当前被选中的option的下标,-1是为了清除加了“请选择”带来的影响
var b = this.selectedIndex - 1;
// 循环遍历城市列表
for (var k = 0; k < cityData[a].children[b].children.length; k++) {
// 将城市列表中的第a个元素的第b个children的children的text和value作为参数,生成新的option项
var opt = new Option(cityData[a].children[b].children[k].text, cityData[a].children[b].children[k].value);
// 将新生成的option加入到县级的下拉框中
countiesSel.appendChild(opt);
}
}
}