原生JS实现三级联动

最新推荐文章于 2024-04-30 16:57:21 发布

weixin_30525825

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量174

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/connect/p/web-three-level-linkage.html

版权

代码实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JS的三级联动</title>
    <style>
        .js-demo {
            width: 700px;
            margin: 0 auto;
            padding-top: 100px;
        }

        select {
            margin-right: 50px;
        }
    </style>
</head>
<body>

<div class="js-demo">
    省份：
    <select id="province"></select>

    城市：
    <select id="city"></select>

    区县：
    <select id="county"></select>
</div>

<script>
    // ===== ===== ===== 获取select元素 ===== ===== =====
    // 获取下拉表单
    var select_province = document.getElementById('province');
    var select_city = document.getElementById('city');
    var select_county = document.getElementById('county');


    // ===== ===== ===== 准备三级联动的数据 ===== ===== =====
    // 省份
    var arr_province = [
        // 省份ID, 省份名称
        { id: 110000, name: '北京市' },
        { id: 120000, name: '天津市' },
        { id: 130000, name: '河北省' },
        { id: 140000, name: '山西省' },
        { id: 150000, name: '内蒙古自治区' },
        { id: 210000, name: '辽宁省' },
        { id: 220000, name: '吉林省' },
        { id: 230000, name: '黑龙江省' },
        { id: 310000, name: '上海市' },
        { id: 320000, name: '江苏省' }
    ];

    // 城市
    var arr_city = [
        // 城市ID, 城市名称, 城市所属的省份（即本级的上一级的ID）
        { id: 110000, name: '北京市', province_id: 110000 },
        { id: 120000, name: '天津市', province_id: 120000 },
        { id: 320100, name: '南京市', province_id: 320000 },
        { id: 320200, name: '无锡市', province_id: 320000 },
        { id: 320300, name: '徐州市', province_id: 320000 },
        { id: 320400, name: '常州市', province_id: 320000 },
        { id: 320500, name: '苏州市', province_id: 320000 },
        { id: 320600, name: '南通市', province_id: 320000 },
        { id: 320700, name: '连云港市', province_id: 320000 },
        { id: 320800, name: '淮安市', province_id: 320000 }
    ];

    // 区县
    var arr_county = [
        // 区县ID, 区县名称, 区县所属的城市（即本级的上一级的ID）
        { id: 110101, name: '东城区', city_id: 110000 },
        { id: 110102, name: '西城区', city_id: 110000 },
        { id: 110105, name: '朝阳区', city_id: 110000 },
        { id: 110106, name: '丰台区', city_id: 110000 },
        { id: 110107, name: '石景山区', city_id: 110000 },
        { id: 110108, name: '海淀区', city_id: 110000 },
        { id: 110109, name: '门头沟区', city_id: 110000 },
        { id: 110111, name: '房山区', city_id: 110000 },
        { id: 110112, name: '通州区', city_id: 110000 },
        { id: 110113, name: '顺义区', city_id: 110000 },
        { id: 110114, name: '昌平区', city_id: 110000 },
        { id: 110115, name: '大兴区', city_id: 110000 },
        { id: 110116, name: '怀柔区', city_id: 110000 },
        { id: 110117, name: '平谷区', city_id: 110000 },
        { id: 110118, name: '密云区', city_id: 110000 },
        { id: 110119, name: '延庆区', city_id: 110000 },
        { id: 320102, name: '玄武区', city_id: 320100 },
        { id: 320104, name: '秦淮区', city_id: 320100 },
        { id: 320105, name: '建邺区', city_id: 320100 },
        { id: 320106, name: '鼓楼区', city_id: 320100 },
        { id: 320111, name: '浦口区', city_id: 320100 },
        { id: 320113, name: '栖霞区', city_id: 320100 },
        { id: 320114, name: '雨花台区', city_id: 320100 },
        { id: 320115, name: '江宁区', city_id: 320100 },
        { id: 320116, name: '六合区', city_id: 320100 },
        { id: 320117, name: '溧水区', city_id: 320100 },
        { id: 320118, name: '高淳区', city_id: 320100 },
        { id: 320117, name: '溧水区', city_id: 320100 }
    ];


    // ===== ===== ===== 给select填充数据的操作 ===== ===== =====
    // 填充province
    function addDataProvince() {
        var html = "<option value='0'>请选择省份</option>";
        var length = arr_province.length;
        for (var i = 0; i < length; i++) {
            html += "<option value='" + arr_province[i].id + "'>" + arr_province[i].name + "</option>";
        }
        select_province.innerHTML = html;
    }

    // 填充city
    function addDataCity(provinceId) {
        var html = "<option value='0'>请选择城市</option>";
        var length = arr_city.length;
        for (var i = 0; i < length; i++) {
            var obj = arr_city[i];
            if (obj.province_id == provinceId) {
                html += "<option value='" + obj.id + "'>" + obj.name + "</option>";
            }
        }
        select_city.innerHTML = html;
    }

    // 填充county
    function addDataCounty(cityId) {
        var html = "<option value='0'>请选择区县</option>";
        var length = arr_county.length;
        for (var i = 0; i < length; i++) {
            var obj = arr_county[i];
            if (obj.city_id == cityId) {
                html += "<option value='" + obj.id + "'>" + obj.name + "</option>";
            }
        }
        select_county.innerHTML = html;
    }


    // ===== ===== ===== 给select绑定change事件 ===== ===== =====
    // select_province绑定change事件
    select_province.onchange = function () {
        var provinceId = select_province.value;
        addDataCity(provinceId);
    };

    // select_city绑定change事件
    select_city.onchange = function () {
        var cityId = select_city.value;
        addDataCounty(cityId);
    };

    // select初始化数据
    addDataProvince();
    addDataCity(arr_province[0].id);
    addDataCounty(arr_city[0].id);


    /* 核心思想就是，通过监听上一级的变化获得上级的value，进而改变本级显示的列表内容。*/

</script>

</body>
</html>

效果图如下：

本文链接：https://www.cnblogs.com/connect/p/web-three-level-linkage.html

转载于:https://www.cnblogs.com/connect/p/web-three-level-linkage.html

weixin_30525825

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现三级联动

代码实现<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>JS的三级联动</title> <style> .js-demo { width: 700p...
复制链接

扫一扫