省市区三级联动

最新推荐文章于 2023-07-26 18:38:29 发布
最新推荐文章于 2023-07-26 18:38:29 发布
阅读量109 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanyuyanyan/article/details/112388619
版权

省市区三级联动（包含案例代码，城市信息文件）

案例代码：数据文件博客中有可以直接下载

onchange事件：当值发生改变时触发事件。只属于文本框，密码框，文本域与下拉选择菜单。

selectedIndex属性：是select的node节点独有的属性，代表当前选择的选项相对于其他选项所处的下标，从0开始。

面向过程

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        div {
            width: 600px;
            height: 30px;
            border: 1px solid rgb(49, 128, 131);
            background-color: rgba(15, 132, 136, 0.6);
            margin: auto;
            margin-top: 50px;
            display: flex;
            justify-content: space-between;
        }
        
        select {
            font-size: 20px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div>
        <select name="" id="provinces"></select>
        <select name="" id="city"></select>
        <select name="" id="district"></select>
    </div>

</body>

</html>
<script src="citys.js"></script>
<script>
    //获取省份或者直辖市
    let oProvinces = document.querySelector("#provinces");
    // 获取城市名称
    let oCity = document.querySelector("#city");
    //获取区
    let oDistrict = document.querySelector("#district");
    //遍历城市信息数据
    citys.forEach((item, index) => {
        let newOption = document.createElement("option");
        // console.log(item)
        newOption.innerHTML = item.provinceName;
        oProvinces.appendChild(newOption);

    })


    //定义函数获取城市信息
    function getCity(index) {
        oCity.innerHTML = ""
        citys[index].mallCityList.forEach((item, index) => {
            let newOption = document.createElement("option");
            newOption.innerHTML = item.cityName;
            oCity.appendChild(newOption);
        })
    }
    //定义函数获取区信息
    function getDistrict(index, Cindex) {
        oDistrict.innerHTML = ""
        citys[index].mallCityList[Cindex].mallAreaList.forEach((item) => {
            let newOption = document.createElement("option");
            newOption.innerHTML = item.areaName;
            oDistrict.appendChild(newOption);

        })
    }

    //页面刚进入时的默认值。
    getCity(0);
    getDistrict(0, 0);

    // 绑定省份框内容改变事件
    oProvinces.onchange = function() {
            getCity(this.selectedIndex);
            getDistrict(this.selectedIndex, oCity.selectedIndex);
        }
        // 绑定城市框内容改变事件
    oCity.onchange = function() {
        getDistrict(oProvinces.selectedIndex, this.selectedIndex);
    }
</script>

面向对象

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        div {
            width: 600px;
            height: 30px;
            border: 1px solid rgb(49, 128, 131);
            background-color: rgba(15, 132, 136, 0.6);
            margin: auto;
            margin-top: 50px;
            display: flex;
            justify-content: space-between;
        }
        
        select {
            font-size: 20px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div>
        <select name="" id="provinces"></select>
        <select name="" id="city"></select>
        <select name="" id="district"></select>
    </div>

</body>

</html>
<script src="citys.js"></script>
<script>
    //面向对象
    let city = {
        oProvinces: document.querySelector("#provinces"),
        oCity: document.querySelector("#city"),
        oDistrict: document.querySelector("#district"),
        init() {
            citys.forEach((item, index) => {
                    let newOption = document.createElement("option");
                    // console.log(item)
                    newOption.innerHTML = item.provinceName;
                    this.oProvinces.appendChild(newOption);
                })
                // //页面刚进入时的默认值。
            this.getCity(0);
            this.getDistrict(0, 0);
            // 绑定省份框内容改变事件
            this.oProvinces.onchange = () => {
                    this.getCity(this.oProvinces.selectedIndex);

                    this.getDistrict(this.oProvinces.selectedIndex, this.oCity.selectedIndex);
                }
                // 绑定城市框内容改变事件
            this.oCity.onchange = () => {
                this.getDistrict(this.oProvinces.selectedIndex, this.oCity.selectedIndex);
            }
        },
        getCity(index) {
            this.oCity.innerHTML = ""
            citys[index].mallCityList.forEach((item, index) => {
                let newOption = document.createElement("option");
                newOption.innerHTML = item.cityName;
                this.oCity.appendChild(newOption);
            })

        },
        getDistrict(index, Cindex) {
            this.oDistrict.innerHTML = ""
            citys[index].mallCityList[Cindex].mallAreaList.forEach((item) => {
                let newOption = document.createElement("option");
                newOption.innerHTML = item.areaName;
                this.oDistrict.appendChild(newOption);

            })
        },


    }
    city.init()

</script>
烟雨嫣嫣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端、h5省市区三级联动
03-27
在移动端和H5开发中，省市区三级联动是一种常见的功能需求，主要用于地址选择，提供用户一个方便快捷的方式来选择他们的详细地址。本示例提供了一款适用于这两种平台的三级联动组件，下面将详细介绍这个功能及其实现...
省市区三级联动Excel
11-13
这是基于Excel制作的三级联动，对有需要的同学可以下载，内部数据可能会随着时间随着规划会过时，方式是没有问题的
Vue------实现省市区三级联动
weixin_52953038的博客
08-27 1万+
三个下拉框，分别代表省、市、区 下面的任务就是，分别绑定 省、市、区三个下拉框： 点击省会出现所有的省份 点击对应的省份，市下拉框会对应出现对应的市 点击市会出现所有的市 点击对应的市，区下拉框会对应出现对应的区。 依次可以实现 省市区三级联动。......
利用级联选择器实现省市区三级联动【vue + elementUI Plus | uViewUI】
qq_36687211的博客
03-29 7102
利用级联选择器实现省市区三级联动
省市区三级联动以及无限分类
兔子的博客
10-27 2487
省市区三级联动以及无限分类 一、 省市区三级联动 省市区三级联动推荐使用 https://github.com/uiwjs/province-city-china 三级联动数据结构 [ { "code": "420000", "name": "湖北省", "province": "42", "children": [ { "code": "420100", "name": "武汉市", "province"
省市区三级联动功能实现(前端+后端)
m0_64714024的博客
07-26 1981
省市区三级联动前后端实现全过程
省市区三级联动（拼接写法）
kallenAB的博客
07-28 3689
省市区三级联动
省市区三级联动json数据
12-27
省市区三级联动数据库 省市区三级联动数据库,包含地区的区号、邮政编码以及区域的坐标位置信息。三级联动
省市区三级联动.html
11-04
适合有jquery基础的同志
省市区三级联动数据库（完整版）
01-07
省市区数据库级联查询所用数据，旗舰版全数据，2018全数据
全球国家，省份，城市 三级联动
04-16
这是从腾讯QQ注册的所在地， 所获取出来的数据，如有问题问老马！
JavaScript实现省份城市的三级联动
11-21
本文实例为大家分享了js实现省份城市的三级联动的具体代码，供大家参考，具体内容如下 效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> select{ width: 80px; margin: 5px; } </style> [removed] // 省份数组 var provinceArr = ['上海', '江苏', '河北']; // 城市数组 var cityArr = [ ['上海市'],
最全省市区三级联动
11-06
最全省市区三级联动，设计思路，直接转换成sql导入到数据库即可
三级联动全国最全
02-10
三级联动全国最全
用js实现省市区三级联动
qq_46007633的博客
03-28 8594
前言 本来想搞一个简单的省市区三级联动，然后在网上找资料发现了一个大佬写的好几种方式，挺全的，很想分享给大家。我选取了其中的一种方式单拿了出来，作为例子给大家看看。找不到博客了，但GitHub的地址浏览记录还有，链接放在最后哦。 另外，走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区交流呀，一起努力一起成长！ 笔芯 index.html文件 <!DOCTYPE html><html lang="en"><head> <me...
vue省市区三级联动-封装集成
热门推荐
chenzimin_blog
11-01 2万+
前言 最近在学习开发一个新的H5产品，想用【mint-ui】的Picker组件区创建一个地址选择器。发现mint-ui官网只有一个简单的示例，满足不了省市区三级联动的需求，找了很多相关文档也没有一个比较系统的说明或demo。为此，想自己做一个总结并写一个自己的demo，方便以后使用。 一、创建一个空项目 在写这个demo前，需要先构建一个空项目，并做好局域网配置，还不懂的可以先看【最近写的一篇博客...
JS实现三级联动
qq_21615847的博客
08-01 2762
js实现三级联动
省市区三级联动web
最新发布
06-14
省市区三级联动，也称为行政区划三级联动或地区选择器，是一种在Web开发中常见的交互式功能，主要用于构建下拉菜单或者表单控件，让用户能够方便地选择中国的省份、城市和区县。这种设计通常用于地理信息录入、地理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值