评论：基于layui的三级省市联动  [查看原文]

所属分类：输入-选择框

 32136  238  21
当前第1页 / 共1页
    经年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
        省份选择为空(即为选择最上面的灰色"省份"两个字的时候)，市县数据都为变成请选择(即为空)
    回复
    Jinyu0
    2019/11/27 9:01:24
    河北省的数据都没有
        promise丶0
        2020/4/7 17:36:59
        怎么设置默认值呢
    回复
    zhizihua0
    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 Love0
    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
    这个和bootstrap可以一起用 来设置响应式吗？求代码
        燕十三@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>";

    以实现  请选择 下拉项禁用

    回复

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

取消回复