开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js省市县三级联动详解

省市县三级联动是一种常见的前端交互功能，它允许用户在选择省份后，自动加载对应的城市列表，再根据选择的城市加载对应的区县列表，从而实现多级联动效果。以下是基于原生JavaScript实现省市县三级联动的详细步骤和示例代码：

实现原理

省市县三级联动的核心在于通过JavaScript监听下拉框的change事件，根据用户选择的省份或城市动态更新下拉框的内容。这通常涉及到异步请求数据，并将返回的数据填充到相应的下拉框中。

示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市县三级联动示例</title>
<script>
// 初始化省市县数据
var provinces = [
    { name: '请选择', code: '' },
    { name: '陕西省', code: 'SN' },
    { name: '河北省', code: 'HE' }
];

var cities = {
    'SN': [
        { name: '西安市', code: 'XA' },
        { name: '宝鸡市', code: 'BA' }
    ],
    'HE': [
        { name: '石家庄市', code: 'ZH' },
        { name: '邢台市', code: 'XT' }
    ]
};

// 监听省份选择变化
document.getElementById('province').onchange = function() {
    var citySelect = document.getElementById('city');
    citySelect.innerHTML = ''; // 清空城市下拉框
    var provinceCode = this.value;
    for (var cityCode in cities[provinceCode]) {
        var option = document.createElement('option');
        option.value = cities[provinceCode][cityCode].code;
        option.innerHTML = cities[provinceCode][cityCode].name;
        citySelect.appendChild(option);
    }
};

// 监听城市选择变化
document.getElementById('city').onchange = function() {
    var countySelect = document.getElementById('county');
    countySelect.innerHTML = ''; // 清空区县下拉框
    var cityCode = this.value;
    for (var countyCode in cities[this.value][countyCode]) {
        var option = document.createElement('option');
        option.value = cities[this.value][countyCode].code;
        option.innerHTML = cities[this.value][countyCode].name;
        countySelect.appendChild(option);
    }
};
</script>
</head>
<body>
    <select id="province">
        <option value="">请选择省份</option>
    </select>
    <select id="city">
        <option value="">请选择城市</option>
    </select>
    <select id="county">
        <option value="">请选择区县</option>
    </select>
</body>
</html>

应用场景

省市县三级联动功能广泛应用于需要用户选择地理位置的场景，如在线购物、物流跟踪、地图服务、行政区划选择等。

通过上述代码和解释，你可以实现一个基本的省市县三级联动功能。根据实际需求，你可能需要进一步优化和扩展功能。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

省市县三级联动

上次找到地区编码后，就测试省市县。网上找到例子感觉不是很合适，然后修改了下。本来是从自己数据库查询，但做测试的话，在网上找到了一个地区编码的api，然后就是跨域问题。...UTF-8"> 5 Insert title here 6 js

2.9K6 0

省市县三级数据联动 -Java

省市县三级数据联动需求：实现省市县三级联动问题，责任继续划分，需要Java后端封装省市县三层数据返回给前端。于是乎开始探索之旅。...DomesticRegionResp> child; //子级元素集合 } 第三步：后端实现代码数据的封装尝试一：思路：首先查询所有的省份和直辖市信息,最后根据省份的ID和直辖市的ID查询它的第二级和第三级...尝试二：查询所有的地区信息，通过java来实现分级和封装 /** * @Description 省 -> 市 -> 县 * 由于频繁请求数据库，取得全部省市县数据数据较慢，因此将数据全部取出交给.../** * @Description 省 -> 市 -> 县 * 由于频繁请求数据库，取得全部省市县数据数据较慢，因此将数据全部取出交给JVM进行处理。.../** * @Description 省 -> 市 -> 县 * 由于频繁请求数据库，取得全部省市县数据数据较慢，因此将数据全部取出交给JVM进行处理。

2.7K2 0

美多商城项目(四)

小闫语录：古语『吾日三省吾身』我们在如今快节奏的生活中，需要片刻的安静，需要片刻的思考。现在的你是否每天沉浸在手机、电脑中，失去了思考的时间，闲暇的时间都充斥在了抖音快手等快餐视频中？...4.省市县三级联动效果。（重点） 4.省市县三级联动 1.省市县存储自关联：省市县地区的存储只需要一张表，表本身是一个自关联。.../bin/bash mysql -u -p -h < sql文件； 4.2省市县三级联动API 1.获取所有省级地区的信息。...（地区下级地区需要进行嵌套序列化）关联对象嵌套序列化：使用指定的序列化器省市县三级联动只需要实现两个接口即可1、4 ?...优质文章推荐: 公众号使用指南 redis操作命令总结前端中那些让你头疼的英文单词 Flask框架重点知识总结回顾项目重点知识点详解难点理解&面试题问答 flask框架中的一些常见问题

1.2K3 0

layui省市区三级联动插件

这个是一个layui省市区三级联动插件，近来使用layui后台模板框架开发后台系统，要用到省市县/区三级联动，本想从网上找个现成的轮子，然没有自己想要的需求，就自己造了个。.../layui/layui.js"> layui.config({ base.../layuiarea/" //layuiarea.js的路径 }).use([ 'layer', 'jquery', "layuiarea" ], function() {...如只想显示二级联动，可将以下代码注释....> 请选择县/区 js

4.1K3 1

我是怎么使用最短路径算法解决动态联动问题的

省市县三级联动问题相信大家都耳熟能详了,选择市下拉选项依赖于省，同样的选择县下拉选项依赖于市。把省市县抽象成三个节点A(省)，B(市)，C(县)，它们的关系如下图(1)。...假如把这个联动问题复杂化一点如图(2)所示，现在随便改变一个节点的值，其余节点的值会发生什么变化，你还能直接说出来吗？这个问题就是本篇将要介绍的动态联动问题。 ? ?...阅读目录动态联动问题分析问题转化最短路径算法实现总结回到顶部动态联动问题分析　　动态联动相对于普通的联动体现在关系事先不可知，省市县联动改变什么相应联动什么都是事先知道的，所以代码实现是相对很简单的...绑定选择县下拉选择项 bindArea(data); } 上面的两个函数代码是类似的，总结一下会发现以下步骤: 　1.获取当前改变项的值（省）...不明白的可以从省市县联动来考虑，改变了省是求不出来县的值的，只能求出市。

1.6K9 0

小程序的三级联动

用到三级联动的方式微信小程序的 picker 组件 mode=date 是三级联动的，但是无法自定义，这让我们心痛不已，值得我们欣慰的 picker-view 组件是可以自定义添加多个选项，但还是无法联动...既然这样那就自己写一个联动。做到如下图所示：分为动态获取地址引用静态文件获取地址 ?...return false } else { // 执行显示动画 this.startAddressAnimation(true) } }, // 处理省市县联动逻辑...return false } else { // 执行显示动画 this.startAddressAnimation(true) } }, // 处理省市县联动逻辑...}) }, onHide: function() { // 页面隐藏 }, onUnload: function() { // 页面关闭 } }); 静态获取三级联动

4.7K2 0

美多商城项目导航帖

涉及技术点：序列化器定义时相关参数使用；JWT认证机制的详解与引入；登录即可以账户密码普通登录，又可以QQ登录；自定义Django认证后端类；QQ登录流程。 ?...涉及技术点：QQ登录流程详解；urllib使用说明；使用itsdangerous生成凭据access_token；request.user。 ?...内容简介四个接口：登录用户的邮箱设置、用户邮箱验证、省市县三级联动API-获取所有省级地区的信息、省市县三级联动API-获取指定地区的信息。...优质文章推荐: 公众号使用指南 redis操作命令总结前端中那些让你头疼的英文单词 Flask框架重点知识总结回顾项目重点知识点详解难点理解&面试题问答 flask框架中的一些常见问题

1.4K2 0

【愚公系列】2022年08月微信小程序-省市区三联动功能实现

- 前言多级联动下拉菜单是前端常见的效果，省市区三级联动又属于其中最典型的案例。...多级联动一般都是与数据相关联的，根据数据来生成和修改联动的下拉菜单。完成一个多级联动效果，有助于增强对数据处理的能力。数据可以是后台从数据库读出来的数据，也可以是在JS里直接写的数据。...citys，市数组，里面每一项内容都有一个属性表示这个市是属于哪个省的，即对应的是省数组里的id。同样areas，区数组，里面都有属性是对应市数组里的id，表示这个区是属于哪个市的。.../city.js') // components/region-picker-view/index.js Component({ options: { multipleSlots: false...this.setData({ visible: true, value: [...this.data.regionValue] }) }, // 处理省市县联动逻辑

3.5K2 0

Python——三级菜单（字典的应用）

最近几天在做的一个题目：三级菜单，按省、市、县三级做一个查询菜单，要求如下， 1.可逐级查询（比如输入山东省，跳出山东所有市，再输入青岛市，可展示青岛所有县） 2.输入b可以返回上一层，比如莱西一级，...直接贴一下网上的答案吧（各省份城市比较多，就随便列级两个直辖市中的一部分市县吧）： #!...西城区':{}, '朝阳区':{}, '丰台区':{}, '石景山区':{}, }, '北京市县...elif choice=='q': break else: print('invalid input,try again please') 思路比较清晰，就是将省、...既然省市县可以用字典分级录入，那按级别做一个不同位数的键值，也无可厚非。第一级省份4位数键值，市6位，县8位。根据键值去查找上下级。

1.1K2 0

这或许是对小白最友好的python入门了吧——20，定义函数简单应用

def aim_address(province,county,city): """返回省市县(区)""" address = province + city + county return address.title...() address = aim_address("广东省","白云区","广州市") print(address) 注意看省市县三级行政区的顺序，这和我们接下来的工作有关 ?...可是有的时候你的顾客居住在直辖市，没有地级市或者“省”这一行政单位，你应该怎么办？...这个时候我们可以用我们上一次介绍的，给相关变量一个默认值： def aim_address(province,county,city = ""): """返回省市县(区)""" address = province

7805 0

农历2016年最后一次先行者群视频

这次的主要内容是，“省市县联动”，很简单的一个应用，就是页面打开的时候，获取省的json内容，然后点击某个省，获取市的内容；点击市，再获取所属区县的json.....//========== 点击地址菜单，将其显示出来； 1，点击省，显示所有的省的列表； getProvince 2，再点击某个市，显示所有的市的列表； getCity 3,再点击某个市，显示所有的区县的列表...； getAddress 4,最后将前三个方法返回的值，拼合为一个字符串，放入相应的title容器中 //================= 然后又讲了封装js的三种方式， //objs它是构造函数

8937 1

在 PyQt5 中构建「省-市-县」级联选择器

比如在购物平台填写收获地址的时候，进行省市县的选择；又比如在一些商品分类中的商品大类、商品子类的选择: 可以说，对于一个正常的Web框架而言，级联选择器都是必不可少的组件。...无非是选择一级的时候，唤起二级的渲染和显示，选择二级的时候，唤起三级的渲染和显示；至于各级是用列表还是用下拉框，都是其次的。下面，我们就使用 PyQt5 构建一个省市县的级联选择器。...最终的效果如下所示：三、构建一个桌面应用的级联选择器准备数据要实现省市县的级联选择，省市县的数据必不可少，在这里，我们使用的是一个 JSON 格式嵌套的省市县数据，如下图所示：数据来源于：https...("--请选择省") self.province.currentTextChanged.connect(self.slot_province_click) for data...), encoding='utf-8') print(self.data_json) # 初始化UI def init_ui(self): # 省选择器

3K2 0

实习第九周

删除后，已启用此场景的设备将失去联动。请注意，场景不可恢复，需重新添加。... 8.省市县三级联动...return paramobj } var somedata = arrToObject(provinceList) //遍历省

8131 0

Vue项目使用mt-picker实现省市区三级联动踩坑记录

最近用 Vue 开发一个项目，需要实现一个省市区三级联动的功能。使用的是饿了么团队的移动端组件库 Mint UI 中的 Picker 组件，官方的文档也是十分的不详细。...下面开始进入正题：我这里使用的是后端提供的省市区数据接口，为了方便最下面代码的理解，我再次贴一下我所使用的数据：省市区三级联动数据您也可以直接下载我提供的 json 文件：点击下载 picker... :visibleItemCount="3" @change="addressChange"> JS...这样就可以实现省市区三级联动了。...声明：本文由w3h5原创，转载请注明出处：《Vue项目使用mt-picker实现省市区三级联动踩坑记录》 https://www.w3h5.com/post/538.html 本文已加入腾讯云自媒体分享计划

1.3K3 0

java中poi导出模板下拉框实现二级联动

org.apache.poi poi-ooxml 3.14 二级联动...XSSFWorkbook(); // 创建需要用户填写的sheet XSSFSheet sheet = (XSSFSheet) workbook.createSheet("省市县...三级联动：代码实现如下： package com.test; import java.io.FileOutputStream; import java.util.HashMap; import java.util.Map...XSSFWorkbook(); // 创建需要用户填写的sheet XSSFSheet sheetPro = (XSSFSheet) book.createSheet("省市县...[]>(); areaMap.put("江苏省", cityJiangSu); areaMap.put("安徽省",cityAnHui); areaMap.put

3.5K3 0

javascript 学习小结 JS装逼技巧(一) by FungLeo

javascript 学习小结 JS装逼技巧(一) by FungLeo 前言最近一直在做javascript方面的工作.但是本身我的javascript水平比较低,因此在学习过程中比较困难.而最近又接触到了很多的知识点...需要注意的是,~~双波浪号的取整是直接去掉小数点后的小数,而并不是采用的四省五入的计算....下面是我的做法: var num = 10 / 3; ~~(num*10000)/10000; 返回 3.3333 这里,是不采用四省五入的方法的.如果需要四省五入,将~~替换成 Math.round...尽量少的去操作DOM结构举个例子,我们可能经常会做的就是三级联动的省市县代码.而下拉菜单很显然需要我们去操作DOM结构.

5172 0

微信小程序----picker选择器（picker、省市区选择器）（MUI选择器）

实现原理利用微信小程序的picker组件，其中： 1，普通选择器：mode = selector实现一级选择实例； 2，省市区选择器：mode = region实现省市区三级联动； 3，多列选择器...：mode = multiSelector实现二级和三级联动的10以内数字的乘法。...}} 省市区三级联动选择...line-height: 80rpx; background-color: #fff; font-size: 35rpx; padding: 0 10px; overflow: hidden; } JS...region: ["四川省", "广元市", "苍溪县"], // 多列选择器(二级联动)列表设置,及初始化 multiArray: [[1, 2, 3, 4, 5, 6, 7

5.6K2 0

3-JQuery学习二-字典操作

Number Of Chinese: " + dict['Jeremy'][0]['Chinese']); 输出结果： Jimmy's Course Number Of Chinese: 3 小例子：用JS...实现省市县三级联动您的地址是： <select id="Province" onchange="SelectValueChanged('Province', 'Get_City...prop.selectedIndex].id; return selectedValue; } function AddCity(provinceSelectedValue){ //保持联动的一致性...option>"; $("#City").append(value); } } function AddCountry(citySelectedValue) { //保持联动一致性

1.1K12 0

Vue项目使用mt-picker实现省市区三级联动踩坑记录

最近用 Vue 开发一个项目，需要实现一个省市区三级联动的功能。使用的是饿了么团队的移动端组件库 Mint UI 中的 Picker 组件，官方的文档也是十分的不详细。...下面开始进入正题：我这里使用的是后端提供的省市区数据接口，为了方便最下面代码的理解，我再次贴一下我所使用的数据：省市区三级联动数据您也可以直接下载我提供的 json 文件：点击下载 picker... :visibleItemCount="3" @change="addressChange"> JS...因为北京只有市和区，没有省的数据，所以初始化的时候没有设置第三个 slot 的值。...这样就可以实现省市区三级联动了。

1892 0

WPF 省市县3级联动

本文告诉大家如何使用绑定做省市县3级联动，代码从网上找的。...CodeView { public string Id { get; set; } public string Name { get; set; } } 然后定义省市县的数据...} public class County:CodeView { } 因为可以通过 xaml 绑定选择的元素，所以可以绑定选择的列请看前台代码，最重要的是通过省选择的元素来作为下一级的数据...，于是选择第一个修改时，就会自动联动可以看到ItemsSource="{Binding Path=SelectedItem.Child,ElementName=ComboBoxProvince}"绑定了上一级选择的元素，所以就可以联动

1.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭