代码实现

<!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

原生JS实现三级联动的更多相关文章

  1. 插件 原生js 省市区 三级联动 源码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. QQ JS省市区三级联动

    如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...

  3. 从QQ网站中提取的纯JS省市区三级联动

    在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...

  4. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动

    MVC图片上传详解   MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...

  6. JS 省市区三级联动

    JS 省市区三级联动: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  7. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

  8. 使用腾讯IP分享计划网站中的纯JS省市区三级联动

    JS地址:http://ip.qq.com/js/geo.js 实例如下: <!DOCTYPE html> <html> <head> <title>省 ...

  9. 引用provinces.js的三级联动

    第一次写随笔   应该写的不是太好   请多多见谅 我这次是在网上发现了一个三级联动    也是给新人一个福利 这个是你需要新建个 JavaScript 文件  并复制到你新建的文件里面 var pr ...

随机推荐

  1. Scala依赖注入

    控制反转(Inversion of Control,简称IoC),是面向对象编程中的一种设计原则,可以用来降低计算机代码之间的耦合程度.其中最常见的方式叫做依赖注入(Dependency Inject ...

  2. windows 获取用户的Sid的方法

    正常获取: whoami /user 如果要获取其他用户的SID就显得力不从心了,我们可以使用微软提供的系统工具 Sysinternals Suite 下载地址:https://docs.micros ...

  3. ERROR 1050 (42S01): Table xxx already exists

      今天遇到一个关于MySQL求助的问题,修改表结构时遇到"ERROR 1050 (42S01): table xxx already exits" mysql> ALTER ...

  4. C#核心基础--类的声明

    C#核心基础--类的声明 类是使用关键字 class 声明的,如下面的示例所示: 访问修饰符 class 类名 { //类成员: // Methods, properties, fields, eve ...

  5. js 3d图形

    使用Three.js在网上中进行3D图形的展示 Three.js的官网https://threejs.org/ 第一个Demo,生成一个旋转的正方体 <style> canvas { wi ...

  6. c/c++连通图的遍历(深度遍历/广度遍历)

    连通图的遍历(深度遍历/广度遍历) 概念:图中的所有节点都要遍历到,并且只能遍历一次. 深度遍历 广度遍历 深度遍历 概念:从一个给定的顶点开始,找到一条边,沿着这条边一直遍历. 广度遍历 概念:从一 ...

  7. {windows故障}关于WIN7故障模块StackHash_0a9e解决方法

    问题背景:我给同事重装好系统后,想用驱动精灵(网卡版)给新系统安装驱动,但是在安装驱动精灵的过程中老是出现标题的问题,windows停止工作,导致无法安装,最后看到这两个方法后,把网络适配器禁用,然后 ...

  8. 【C编程基础】make命令和makefile文件

    1.关于程序的编译和链接 一般来说,无论是C.C++首先要把源文件编译成中间目标文件即 Object File(windows为.obj文件,unix为.o文件),这个动作叫做编译(compile). ...

  9. Linux：自动删除n天前日志

    linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快的事情.不用你去每天惦记着是否需要清理日志 ...

  10. Ubuntu下导入PySpark到Shell和Pycharm中（未整理）

    实习后面需要用到spark,虽然之前跟了edX的spark的课程以及用spark进行machine learning,但那个环境是官方已经搭建好的,但要在自己的系统里将PySpark导入shell(或 ...