原生js实现省市区三级联动

最新推荐文章于 2024-06-16 14:06:27 发布
最新推荐文章于 2024-06-16 14:06:27 发布
阅读量324 收藏 1
点赞数 2
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79265530/article/details/132729645
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <!-- 省 -->
        <select name="" id="province">
            <option value="">选择省</option>
        </select>
        <!-- 市 -->
        <select name="" id="city">
            <option value="">选择市</option>
        </select>
        <!-- 区 -->
        <select name="" id="district">
            <option value="">选择区</option>
        </select>
        <script>
            // 数组
            let data = [{
                    id: 1,
                    name: "河南",
                    childer: [{
                            name: "开封",
                            childer: [
                                "龙亭区",
                                "顺河回族区",
                                "鼓楼区",
                                "祥符区"
                            ]
                        },
                        {
                            name: "新乡",
                            childer: [
                                "红旗区",
                                "经开区",
                                "卫滨区",
                                "牧野区",
                            ]
                        },
                        {
                            name: "洛阳",
                            childer: [
                                "老城区",
                                "西工区",
                                "洛龙区",
                                "孟津区",
                            ]
                        }
                    ]

                },
                {
                    id: 2,
                    name: "河北",
                    childer: [{
                            name: "石家庄",
                            childer: [
                                "长安区",
                                "桥西区",
                                "新华区",
                                "鹿泉区",
                            ]
                        },
                        {
                            name: "张家口",
                            childer: [
                                "张北县",
                                "康保县",
                                "逐鹿县",
                                "怀安县",
                            ]
                        },
                        {
                            name: "秦皇岛市",
                            childer: [
                                "海港区",
                                "山海关区",
                                "北戴河区",
                                "抚宁区",
                            ]
                        }
                    ]
                },
                {
                    id: 3,
                    name: "北京",
                    childer: [{
                            name: "朝阳区",
                            childer: [
                                "双塔区",
                                "龙城区",
                                "朝阳县",
                                "建平县",
                            ]
                        },
                        {
                            name: "东城区",
                            childer: [
                                "半截河街道",
                                "邓庄街道",
                                "永昌路街道",
                                "祖师街道",
                            ]
                        }
                    ]
                },
                {
                    id: 4,
                    name: "山东",
                    childer: [{
                            name: "青岛",
                            childer: [
                                "市南区",
                                "市北区",
                                "黄岛区",
                                "崂山区",
                            ]
                        },
                        {
                            name: "威海",
                            childer: [
                                "环翠区",
                                "文登区",
                                "荣成市",
                                "乳山市",
                            ]
                        }
                    ]
                },
                {
                    id: 5,
                    name: "山西",
                    childer: [{
                            name: "太原市",
                            childer: [
                                "小店区",
                                "迎泽区",
                                "杏花岭区",
                                "尖草坪区",
                            ]
                        },
                        {
                            name: "大同市",
                            childer: [
                                "阳高县",
                                "天镇县",
                                "广灵县",
                                "浑源县",
                            ]
                        }
                    ]
                },
                {
                    id: 6,
                    name: "斗气大陆",
                    childer: [{
                            name: "加玛帝国",
                            childer: [
                                "云岚宗",
                                "皇室",
                                "炼药师工会",
                                "米特尔家族",
                            ]
                        },
                        {
                            name: "中州",
                            childer: [
                                "丹塔",
                                "花宗",
                                "魂殿",
                                "古族",
                            ]
                        },
                    ]
                }
            ]
            //获取每个标签
            let inne = document.getElementById('province');
            let int = document.getElementById('city');
            let inpu = document.getElementById('district');
            //循环假数据data'
            for (let i = 0; i < data.length; i++) {
                //拼接option
                inne.innerHTML += '<option value="' + i + '">' + data[i].name + '</option>';
            }
            inne.onclick = function() {
                let tp = this.value;
                int.innerHTML = '<option value="">请选择市</option>';
                for (let i = 0; i < data[tp].childer.length; i++) {
                    int.innerHTML += '<option value="' + i + '">' + data[tp].childer[i].name + '</option>';
                }
                int.onclick = function() {
                    let ts = this.value;
                    inpu.innerHTML = '<option value="">请选择县</option>';
                    for (let i = 0; i < data[tp].childer[ts].childer.length; i++) {
                        inpu.innerHTML += '<option value="">' + data[tp].childer[ts].childer[i] + '</option>';
                    }
                }
            }
        </script>
    </body>
</html>

贰零壹玖.
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用原生JS实现省市区三级联动（详解）
小苏(º﹃º )的博客
05-09 1万+
JavaScript实现省市区三级联动1.遍历数据2.二级联动的实现3.三级联动的实现 1.遍历数据 数据链接 提取码: bv3t 2.二级联动的实现 3.三级联动的实现
原生js之 省市区三级联动
White_BR的博客
11-18 1269
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>省市区三级联动</title> <style> select { width: 200px; padding: 5px; ...
省市区3级联动纯JS(内含数据)
02-19
内含省市区所有数据，轻松调用，为了节省时间没有弄DEMO 但是又贴出案例代码，可去除样式COPY
最新省市区三级联动(数据库版).js
10-24
页面导入js，直接调用cascade(0,0,0)即可，修改时请传入省市区的id或名称，即可默认选中 需要的朋友，请自行创建数据库
js实现省市区三级联动
最新发布
2302_80798583的博客
06-16 178
【代码】js实现省市区三级联动。
省市区联动数据
杨星的博客
08-19 408
provinceList.js const provice = [ { "areaId":"11", "areaName":"北京市", "children":[ { "areaId":"1101", "areaName":"北京市", "children":[ { .
移动端、h5省市区三级联动
03-27
一款省市区三级联动的demo，适用于移动端、h5，有需要的可以自行下载
用js实现省市区三级联动
qq_46007633的博客
03-28 8614
前言 本来想搞一个简单的省市区三级联动，然后在网上找资料发现了一个大佬写的好几种方式，挺全的，很想分享给大家。我选取了其中的一种方式单拿了出来，作为例子给大家看看。找不到博客了，但GitHub的地址浏览记录还有，链接放在最后哦。 另外，走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区交流呀，一起努力一起成长！ 笔芯 index.html文件 <!DOCTYPE html><html lang="en"><head> <me...
使用JavaScript实现省市县三级联动
lzy_55的博客
08-05 1897
js实现三级联动
js 实现三级联动
qq_60504665的博客
09-23 1346
其中三级联动是比较常见的功能，比如实现省、市、区的联动选择。实现三级联动的核心是使用JavaScript根据用户的选择动态生成选项，下面将通过举例说明如何实现一个省、市、区的三级联动选择。当用户选择省份时，上面的代码会触发change事件，接下来需要根据选择的省份动态生成市级选项。上面的代码首先清空了区级选项，然后根据用户选择的市级选项动态生成区级选项，最后将生成的选项添加到区级下拉框中。上面的代码首先清空了市级选项，然后根据用户选择的省份动态生成市级选项，最后将生成的选项添加到市级下拉框中。
distpicker.js制作省市区三级联动
hangGe0111的博客
04-20 822
1.html <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .txzlLi { margin...
原生js实现省市区三级联动代码分享
10-18
主要介绍了原生js实现省市区三级联动功能以及代码分享，对此有需要的朋友可以参考学习下。
js实现移动端省市区三级联动选择器效果
08-12
通过以上步骤，我们可以利用JavaScript实现一个高效、灵活的移动端省市区三级联动选择器。在实际项目中，还可以结合前端框架（如Vue、React等）或第三方库（如jQuery UI）来简化开发过程，提高代码的可维护性和可...
原生js省市三级联动
10-26
在开发Web应用时，"原生js省市三级联动"是一个常见的功能需求，尤其在电商网站的用户收货地址填写页面中。这个功能主要是通过JavaScript实现省份、城市、区县（或街道）三个级别的下拉菜单联动，用户选择一个省份后...
省市区三级联动.rar
09-23
这个“省市区三级联动.rar”压缩包文件提供了一种使用JavaScript实现这一功能的方法，使得用户在输入地址时能方便地从预设的省、市、区列表中逐级选择。 首先，我们要理解什么是三级联动。在网页设计中，三级联动指...
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
10-22
本示例将介绍如何使用原生JavaScript实现这样一个动态省市县三级联动的下拉框菜单。 首先，我们来看一下实现这个功能的主要思路： 1. 创建三个下拉菜单，分别代表省份、城市和县区。 2. 用户在选择省份时，通过...
原生js实现简单的省市区联动效果
沐小侠
11-03 3257
省市区实现思路： ① 一维数组 provinces 保存省、自治区和直辖市。 ② 二维数组 cities 保存对应省、自治区和直辖市下的所有城市，存储时要保证 cities[index]中 index 值与对应 provinces 中元素的下标索引相同。 ③ 同理，利用三维数组保存每个城市下的区域的所有区域。 ① 创建 HTML 表单，实现省份、城市、区域的下拉列表。 ② 创建数组保存省份城市区域的数据。 ③ 编写函数 createOption()用于创建指定下拉菜单的选项。
【前端】JavaScript实现二级联动(省市、楼栋)
m0_64210833的博客
12-04 2147
二级联动在实际需求中使用的非常多，比如省市，楼栋等，所以我们应当也应该掌握这些前端知识。
html地区选择js,JavaScript实现省市区三级联动
weixin_29261711的博客
06-04 684
JavaScript实现省市区三级联动之前的文章中我们说到过如何利用JavaScript实现二级联动，这次我们来说说如何利用JavaScript实现三级联动。效果如图：HTML代码：请选择省份： 请选择省份...... 请选择城市： 请选择城市...... 请选择地区： 请选择地区...... JavaScript代码：/...
原生js省市县三级联动
08-20
原生JavaScript实现省市县三级联动的方法如下： 首先，需要准备好省市县的数据。可以通过JSON格式的数据来表示，比如： ```javascript var data = { "province": [ { "name": "省份1", "cities": [ { "name": "城市1", "counties": ["县1", "县2", "县3"] }, { "name": "城市2", "counties": ["县4", "县5", "县6"] } ] }, { "name": "省份2", "cities": [ { "name": "城市3", "counties": ["县7", "县8", "县9"] }, { "name": "城市4", "counties": ["县10", "县11", "县12"] } ] } ] }; ``` 然后，在HTML中添加三个select元素作为下拉框，分别表示省、市、县： ```html <select id="province"></select> <select id="city"></select> <select id="county"></select> ``` 接下来，通过JavaScript将省份数据加载到省份下拉框中： ```javascript var provinceSelect = document.getElementById("province"); for (var i = 0; i < data.province.length; i++) { var option = document.createElement("option"); option.text = data.province[i].name; provinceSelect.add(option); } ``` 通过监听省份下拉框的change事件，根据选中的省份，动态加载对应的城市数据到城市下拉框： ```javascript var citySelect = document.getElementById("city"); provinceSelect.addEventListener("change", function() { var cities = data.province[provinceSelect.selectedIndex].cities; citySelect.innerHTML = ""; // 清空城市下拉框 for (var i = 0; i < cities.length; i++) { var option = document.createElement("option"); option.text = cities[i].name; citySelect.add(option); } }); ``` 最后，再根据选中的城市，动态加载对应的县区数据到县区下拉框： ```javascript var countySelect = document.getElementById("county"); citySelect.addEventListener("change", function() { var counties = data.province[provinceSelect.selectedIndex].cities[citySelect.selectedIndex].counties; countySelect.innerHTML = ""; // 清空县区下拉框 for (var i = 0; i < counties.length; i++) { var option = document.createElement("option"); option.text = counties[i]; countySelect.add(option); } }); ``` 以上就是原生JavaScript实现省市县三级联动的简单示例。当省份或城市改变时，会动态加载对应的数据到下拉框中，实现了三级联动的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值