JavaScript：省、市、县三级联动案例

袁成新（Chauncey Yuan）

于 2019-08-15 21:31:36 发布

阅读量404

点赞数

分类专栏： JavaScript学习文章标签： js 三级联动中国城市三级联动

本文链接：https://blog.csdn.net/weixin_43666825/article/details/99656282

版权

JavaScript学习专栏收录该内容

17 篇文章 2 订阅

订阅专栏

三级联动城市数据来自：四月四日梦：中国城市三级联动数据

运行效果

在这里插入图片描述

源代码

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);
        }
    }
}

袁成新（Chauncey Yuan）

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript：省、市、县三级联动案例

三级联动城市数据来自：四月四日梦：中国城市三级联动数据运行效果源代码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:4...
复制链接

扫一扫

专栏目录