纯JS实现三级联动

最新推荐文章于 2023-09-23 13:15:52 发布
最新推荐文章于 2023-09-23 13:15:52 发布
阅读量195 收藏
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46500485/article/details/108368700
版权

纯JS实现三级联动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select id="province">
        <option>--请选择省--</option>
    </select>
    <select id="city">
        <option>--请选择市--</option>
    </select>
    <select id="county">
        <option>--请选择区--</option>
    </select>
    <script>
        var province = document.querySelector('#province');
        var city = document.querySelector('#city');
        var county = document.querySelector('#county');

        // 数据
        var arr = [{
                province: "北京",
                type: "直辖市",
                cities: [{
                    name: "朝阳区",
                    county: []
                }, {
                    name: "东城区",
                    county: []
                }, {
                    name: "西城区",
                    county: []
                }, {
                    name: "大兴区",
                    county: []
                }, {
                    name: "丰台",
                    county: []
                }, {
                    name: "昌平",
                    county: []
                }]
            }, {
                province: "山东",
                type: "省",
                cities: [{
                    name: '济南',
                    county: [{
                        name: '天桥区'
                    }, {
                        name: '市中区'
                    }, {
                        name: "长清区"
                    }]
                }, {
                    name: "青岛",
                    county: [{
                        name: "市南区"
                    }, {
                        name: "市北区"
                    }, {
                        name: "胶南市"
                    }, {
                        name: "城阳区"
                    }]
                }]
            }, {
                province: "广东",
                type: "省",
                cities: [{
                        name: "广州",
                        county: [{
                            name: "天河区"
                        }, {
                            name: "白云区",
                        }, {
                            name: "黄浦区"
                        }, {
                            name: "海珠区"
                        }]
                    }, {
                        name: "深圳",
                        county: [{
                            name: "宝安区"
                        }, {
                            name: "福田区"
                        }, {
                            name: "罗湖区"
                        }, {
                            name: "南山区"
                        }]
                    }, {
                        name: "江门",
                        county: [{
                            name: "蓬江区"
                        }, {
                            name: "江海区"
                        }, {
                            name: "新会"
                        }, {
                            name: "台山"
                        }]
                    },

                ]
            }]
            // var province = '';
            //将数组中的省份渲染给省份下拉框
        arr.forEach(item => {
            // console.log(item.province);
            var option = document.createElement('option');
            option.innerHTML = item.province;
            option.value = item.province
            province.appendChild(option);
        })
        //当省份下拉框改变时
        province.onchange = function() {
            city.innerHTML = "<option>--请选择市--</option>";
            county.innerHTML = "<option>--请选择区--</option>";
            //得到当前省份下拉框的值  以便于之后得到对应市下拉框的值
            nowProvince = province.value;
			//使用当前省份的值过滤出arr的值  此时得到的arr1的是一个包含province type cities
            var arr1 = arr.filter(item => {
                    return item.province === nowProvince;
                })[0]
                // console.log(arr1);
                // console.log(arr1);
            if (!arr1) {
                city.innerHTML = "<option>--请选择市--</option>";
                county.innerHTML = "<option>--请选择区--</option>";
                return
            }
            //将arr1中的cities给city1 此时的city1是一个数组
            var city1 = arr1.cities;
            // console.log(city1);
            //循环这个数组得到这个city1中市的名字 然后将其渲染到option中
            city1.forEach(item => {
                var option = document.createElement('option');
                option.innerHTML = item.name;
                option.value = item.name
                city.appendChild(option);
            })
        }
        //当city选项框发送改变的时候
        city.onchange = function() {
            county.innerHTML = "<option>--请选择区--</option>";
            //得到当前省的值
            nowProvince = province.value;
            //得到当前市的值
            nowCity = city.value;
            //通过当前省份的值过滤出当前省份中的所有信息
            var arr1 = arr.filter(item => {
                return item.province === nowProvince;
            })[0]
            console.log(arr1);
            //通过当前市的值过滤出当前市中的所有信息
            var arr2 = arr1.cities.filter(item => {
                // console.log(item);
                return item.name === nowCity;
            })[0]
            console.log(arr2);
            if (!arr2) {
                county.innerHTML = "<option>--请选择区--</option>";
                return;
            }
            //将市中的区的值渲染给option
            arr2.county.forEach(item => {
                    var option = document.createElement('option');
                    option.innerHTML = item.name;
                    option.value = item.name
                    county.appendChild(option);
                })
                // console.log(1);
        }
    </script>
</body>

</html>
江呱呱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 实现三级联动
weixin_48494427的博客
06-06 256
html代码 外链js代码 省市区三级联动
纯js实现省市区三级联动
05-16
在"纯js实现省市区三级联动"的项目中，开发者通过JavaScript代码，创建了三个下拉列表，分别代表省份、城市和区县。这些下拉列表的数据来源通常是JSON格式，因为JSON是一种轻量级的数据交换格式，易于人阅读和编写，...
原生js实现三级联动
小柒的前端之旅
03-30 4023
简单的三级联动，锻炼逻辑思维 js部分有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
原生JS实现三级联动
qq_44197554的博客
05-21 1035
效果展示 在我们使用某个APP或者网站的时候，需要注册，那么会有地区选择，选择某个省，会自动列出这个省的所有城市，选择城市，会自动列出所有村镇，我们要实现的就是这个效果，在这里村镇就用每个省的学校来替代，完整代码已经上传到github：https://github.com/caohongyu-crypto/Three-level-，所有的省市信息我放在一个js文件里，省会是一个数组，城市和学校是对象(下面是部分信息截图)： 所有不需要向后台请求数据，效果如下： 是不是感觉很简单，没错，就是很简单 HTM
简单的纯js三级联动
weixin_34138255的博客
06-22 73
参考这个  日尼禾尔  二级联动 写了三级联动 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;三级城市联动&lt;/title&gt; &lt;/head&gt; &lt;body&gt;
使用JS实现三级联动
Youareseeing的博客
06-17 4067
利用js实现三级联动 直接放代码： 讲一下思路：1、首先需要获取所有省的数组，通过遍历得到省。for (let s of sequence) {}2、获取市的数组、再进行遍历得到市。注：需要根据省份的adcode值与你选择的省份值进行对比，然后得到所有市的数组，var provinceCheck=provinces.find(function(item){ return item.adco
js 实现省市区三级联动菜单效果
10-20
本文将详细介绍使用JavaScript实现省市区三级联动菜单效果的原理和方法，并通过示例代码加深理解。 首先，三级联动菜单的核心是基于数据联动原理，当用户在一级选择框中选择了某个省份后，二级选择框会自动更新为该...
纯JS实现地区选择三级联动下拉框
11-11
综上所述，实现纯JS的地区选择三级联动下拉框，不仅需要对JavaScript的基本语法有深入理解，还需要熟练掌握DOM操作、事件处理、数据结构设计以及性能优化等技巧。通过这个过程，开发者可以进一步提升JavaScript编程...
纯js三维数组实现三级联动效果
10-20
在本文中，我们将探讨如何使用纯JavaScript实现一个三级联动效果，这种效果通常用于下拉菜单，其中选择一个选项会自动更新后续选项。这种功能在各种Web应用中很常见，比如选择地区、城市和街道地址，或者在本例中的...
js实现三级联动展现
11-25
在这个例子中，"js实现三级联动展现"，我们看到JavaScript是实现这种动态效果的关键。JavaScript是一种客户端脚本语言，它允许我们在用户与网页交互时执行代码，更新页面内容。在这种情况下，JavaScript负责监听第一...
js实现三级联动效果（简单易懂）
12-08
话不多说，请看代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <select id="one"> <option>请输入省份</option> </select> <select id="two"> <option>请输入市</option> </select> <select id="three"> <option>请输入区</option> </select> [removed] var o
js实现简单的三级城市联动
02-07
十分基础的三级城市联动，包含中国所有省，自治区、特区，省市区三级联动，仅做参考，应用到实际还需要根据要求修改。
js 实现三级联动
最新发布
qq_60504665的博客
09-23 1403
其中三级联动是比较常见的功能，比如实现省、市、区的联动选择。实现三级联动的核心是使用JavaScript根据用户的选择动态生成选项，下面将通过举例说明如何实现一个省、市、区的三级联动选择。当用户选择省份时，上面的代码会触发change事件，接下来需要根据选择的省份动态生成市级选项。上面的代码首先清空了区级选项，然后根据用户选择的市级选项动态生成区级选项，最后将生成的选项添加到区级下拉框中。上面的代码首先清空了市级选项，然后根据用户选择的省份动态生成市级选项，最后将生成的选项添加到市级下拉框中。
js实现三级联动
dtbk123的博客
09-18 342
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin: 0;padding: 0} div{margin:50...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值