基于layui的三级省市联动

所属分类：输入-选择框

33968 238 查看评论 (21)

分享到微信朋友圈

查看演示立即下载

插件描述：基于layui的三级省市联动，方便简单，易修改，这是某位大佬写的js版本被我改成了layui版本，原作者不详

更新时间：2020-07-15 20:31:02

更新说明：修改某些省市区数据

更新时间：2019-10-16 23:10:57

更新说明：

1. 支持单页多个三级联动

2. 省市县数据更新到相对比较准确的程度(实在找不到官方的最新数据)，每个地级市添加“其他区”选项，以保证没有更新到的区可以正常填写

3. 香港，澳门，台湾移除具体的地区选择，如有需要，请自行添加(没有具体数据参考)

省市县数据存放在area.js，调用方法在select.js，里面都有注释

jQuery文字向上滚动动画效果

手机app通用模板个人中心页面模板

jQuery多选和单选下拉框插件select.js（原创）

可通过参数设置多选或者单选，多选返回数组结果，单选返回字符串

选择框

70876 414

jquery 省市区三级联动选择（原创）

省市区三级联动选择，可以任意改造样式

选择框

29991 319

CheckBox展现不同的状态（原创）

类似qq邮箱选中展现不同的状态，常用功能，简单实用。

选择框

23676 284

js实现美化的下拉框菜单插件

用div+ul实现的下拉框，用户可通过修改样式来定义自己喜欢的风格。

选择框

61779 360

讨论这个项目（21）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约

经年 0

2020/7/8 11:52:53

燕十三@1

2020/7/15 10:54:35

//截取自 selectMore.js
var province = $(".province");

//初始将省份数据赋予  provinceList来源于area.js 详见area.js
for (var i = 0; i < provinceList.length; i++) {
    addEle(province, provinceList[i].name);
}

//向select中 追加内容
function addEle(ele, value) {
    var optionStr = "";
    optionStr = "<option value=" + value + " >" + value + "</option>";
    ele.append(optionStr);
}

单字一个“铭” 0

2020/6/1 14:23:43

燕十三@3

2020/7/15 11:29:01

<!-- JSP 示例 -->
<div class="layui-form-item">
<label class="layui-form-label">请选择地区</label>
<div class="layui-inline">
<select name="province" id="province" lay-verify="required" lay-search lay-filter="province">
<!-- 数据来源于后台 此时因为调用area 所以option会有一个重复项 调用js去除重复项 -->
<option value="${XXX.province}">${XXX.province}</option>
<!-- 去除重复项 -->
<!--
<script>
   $("select option").each(function(){
      if($this.val() == $("select option:selected").val())
            $this.remove();
 //重新渲染select
form.render('select');
})
</srcipt>
 -->
<!-- ajax的话 可以select默认设置为空，然后追加选中-->
<!--
      $.ajax({
         ...
      success:function(data){
     $("select option").each(function(){
      let $this= $(this);
          if($this.val() == data.province)
            $this.attr('selected', 'selected');  
   //重新渲染select
form.render('select');
     })
}
})
--> 
</select>
</div>
<!-- Thymeleaf 示例 -->
<div class="layui-form-item">
<label class="layui-form-label">请选择地区</label>
<div class="layui-inline">
<select name="province" id="province" lay-verify="required" lay-search lay-filter="province">
<!-- 数据来源于后台 此时因为调用area 所以option会有一个重复项 js去除重复项 -->
<option th:value="${XXX.province}" th:text="${XXX.province}"></option>
<!-- 去除重复项 -->
<!--
<script>
   $("select option").each(function(){
      if($this.val() == $("select option:selected").val())
            $this.remove();
 //重新渲染select
form.render('select');
})
</srcipt>
 -->
<!-- ajax的话 可以select默认设置为空，然后追加选中-->
<!--
      $.ajax({
         ...
      success:function(data){
     $("select option").each(function(){
      let $this= $(this);
          if($this.val() == data.province)
            $this.attr('selected', 'selected');  
//重新渲染select
form.render('select');
     })
}
})
--> 
</select>
</div>
<!-- html 模板可以采用Ajax传值的方式 -->

ぃ暖冬‰ 0

2019/12/3 11:48:25

燕十三@1

2019/12/20 15:50:47

省份选择为空(即为选择最上面的灰色"省份"两个字的时候)，市县数据都为变成请选择(即为空)

Jinyu 0

2019/11/27 9:01:24

promise丶0

2020/4/7 17:36:59

zhizihua 0

2019/10/19 14:37:57

燕十三@1

2019/10/21 16:40:15

可以参照如下实例：

$.ajax({
url: /,
data: {},
type: "post",
dataType: "json",
success: function(data) {
    $("#brand").find("option").remove();
    let msg = "<option value=''>品牌</option>";
    for (let i = 0; i < data.length; i++) {
        msg += "<option value=" + data[i].id + ">" + data[i].title + "</option>"
    }
    $("#brand").append(msg);
    $("#series").find("option").remove();
    let ser = "<option value=''>系列</option>";
    $("#series").append(ser);
    form.render('select'); //这一步必不可少的 重新渲染select
},
error: function() {
    $("#brand").find("option").remove();
    let msg = "<option value=''>品牌</option>";
    $("#brand").append(msg);
    $("#series").find("option").remove();
    let ser = "<option value=''>系列</option>";
    $("#series").append(ser);
    form.render('select'); //这一步必不可少的 重新渲染select
}
});
})

早已是个废物 0

2019/10/15 14:35:36

燕十三@1

2019/10/16 10:43:33

数据来源于中华人民共和国民政部，网址

http://www.mca.gov.cn

2019年8月中华人民共和国县以上行政区划代码，网址

http://www.mca.gov.cn/article/sj/tjyb/qgsj/2019/201909291543.html

部分数据：

410000 河南省 
410100  郑州市 
410102    中原区 
410103    二七区 
410104    管城回族区 
410105    金水区 
410106    上街区 
410108    惠济区 
410122    中牟县 
410181    巩义市 
410182    荥阳市 
410183    新密市 
410184    新郑市 
410185    登封市

关于这个问题我也刚看到，行政区域划分没有郑州高新技术开发区等内容，我会参考其他数据，稍后会上传一版

Jinyu0

2019/11/27 9:02:22

你好，有新的一版出来了吗？

Endless Love 0

2019/9/26 15:13:10

燕十三@1

2019/10/14 11:25:57

数据调用的area.js，如果数据格式有变化，需要一并修改select.js，仅仅数据变化的话修改area.js就行了

安静 0

2019/8/16 11:11:32

燕十三@0

2019/8/27 10:59:14

今天项目中同样碰到了这个需求，所以在改，可能有空会重新上传一版

.............. 0

2019/7/29 17:34:50

燕十三@0

2019/7/31 14:39:51

这个demo不支持响应式，你可以下载根据自己需求改或做适当变形支持响应式布局，下载是免费的，里面有源码里

燕十三@1

2019/7/31 14:59:31

<body>
  <div>
     <form class="layui-main" method="post" action="javascript:;">
        　...
     </form>
  </div>
</body>

这是我的写法，根据官网公共类规范　
layui-main 用于设置一个宽度为 1140px 的水平居中块（无响应式）
如果你想设置为响应式请参考：
容器：

layui-container//此类能在小屏幕以上的设备中固定宽度，让列可控。在PC端会设置一定的宽度且居中
layui-fluid//使用此类不会固定宽度，而是 100%自适应

公共类：

layui-show-*-block 定义不同设备下的 display: block; * 可选值有：xs、sm、md、lg
layui-show-*-inline 定义不同设备下的 display: inline; * 可选值同上
layui-show-*-inline-block 定义不同设备下的 display: inline-block; * 可选

值同上
layui-hide-* 定义不同设备下的隐藏类，即： display: none; * 可选值同上
详情请参考官网：

https://www.layui.com/doc/element/layout.html

目前没发现layui与bootstrap有冲突的现象，百度了一下也没有，你使用时候尽可能把layui.css放在最上面

燕十三@ 1

2019/7/18 16:56:40

将select.js中

var optionStar = "<option value="" >" + "请选择" + "</option>";

改为

var optionStar = "<option value="" disabled>" + "请选择" + "</option>";

以实现请选择下拉项禁用

查看更多评论

😃

😀
😉
😥
😵
😫
😘
😡
👍
🌹
👏
🍺
🍉
🌙
⭐
💖
💔

😃

😀
😉
😥
😵
😫
😘
😡
👍
🌹
👏
🍺
🍉
🌙
⭐
💖
💔

取消回复

基于layui的三级省市联动

jQuery多选和单选下拉框插件select.js（原创）

jquery 省市区三级联动选择（原创）

CheckBox展现不同的状态（原创）

js实现美化的下拉框菜单插件

讨论这个项目（21）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

PROMULGATOR

燕十三@

讨论这个项目（21）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约