layui实现下拉框三级联动


Posted in Javascript onJuly 26, 2019

项目需要用layui的三级联动,自己整理了一下,做个记录

1.表结构设计

CREATE TABLE `dt_area` (
 `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '区域主键',
 `area_name` varchar(16) DEFAULT NULL COMMENT '区域名称',
 `area_code` varchar(128) DEFAULT NULL COMMENT '区域代码',
 `area_short` varchar(32) DEFAULT NULL COMMENT '区域简称',
 `area_is_hot` varchar(1) DEFAULT NULL COMMENT '是否热门(0:否、1:是)',
 `area_sequence` int(11) DEFAULT NULL COMMENT '区域序列',
 `area_parent_id` int(11) DEFAULT NULL COMMENT '上级主键',
 `init_date` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '初始时间',
 PRIMARY KEY (`id`),
 KEY `parent_id` (`area_parent_id`) USING HASH
) ENGINE=InnoDB AUTO_INCREMENT=900001 DEFAULT CHARSET=utf8 COMMENT='区域字典';

2.mybatis xml

<select id="queryByParentId" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
 select
 <include refid="Base_Column_List" />
 from dt_area
 where area_parent_id = #{id,jdbcType=INTEGER}
</select>

根据上级主键查询

3.页面元素

<div class="layui-form-item">
  <label class="layui-form-label">地址</label>
  <div class="layui-input-inline">
   <select id="province" lay-filter="province" lay-verify="required" lay-search="">
     <option value="">请选择或搜索省</option>
   </select>
  </div>
  <div class="layui-input-inline">
   <select id="city" lay-filter="city" lay-verify="required" lay-search="">
     <option value="">请选择或搜索市</option>
   </select>
  </div>
  <div class="layui-input-inline">
   <select id="area" lay-filter="area" lay-verify="required" lay-search="">
     <option value="">请选择或搜索县/区</option>
   </select>
  </div>
 
  <div class="layui-input-inline" style="width: 45%;">
   <input class="layui-input" id="" lay-verify="required" placeholder="请输入详细地址:城镇+乡村+街道+门牌号码"></input>
  </div>
</div>

4.js

layui.use(['form','layer','jquery'],function(){
  var form = layui.form,
   layer = parent.layer === undefined ? layui.layer : parent.layer,
   $ = layui.jquery;
 
  var provinceText = "";
  var cityText = "";
  var areaText = "";
  //异步加载下拉框数据
  $.post(WEB_ROOT+"dtArea/queryByParentId",{"id":0},function (data) {
    if(!data.success){
      layer.msg(data.msg)
    }else{
      var $html = "";
      if(data.data != null) {
        $.each(data.data, function (index, item) {
          $html += "<option value='" + item.id + "'>" + item.areaName + "</option>";
        });
        $("#province").append($html);
        //append后必须从新渲染
        form.render('select');
      }
    }
 
  });
 
  //监听省下拉框
  form.on('select(province)', function(dataObj){
    //移除城市下拉框所有选项
    $("#city").empty();
    var cityHtml = '<option value="">请选择或搜索市</option>';
    $("#city").html(cityHtml);
    var areaHtml = '<option value="">请选择或搜索县/区</option>';
    $("#area").html(areaHtml);
    provinceText = $("#province").find("option:selected").text();
    var value = $("#province").val();
    //异步加载下拉框数据
    $.post(WEB_ROOT+"dtArea/queryByParentId",{"id":value},function (data) {
      if(!data.success){
        layer.msg(data.msg)
      }else{
        var $html = "";
        if(data.data != null) {
          $.each(data.data, function (index, item) {
            $html += "<option value='" + item.id + "'>" + item.areaName + "</option>";
          });
          $("#city").append($html);
          //append后必须从新渲染
          form.render('select');
        }
      }
 
    });
 
  });
 
  //监听市下拉框
  form.on('select(city)', function(dataObj){
    //移除县区下拉框所有选项
    $("#area").empty();
    var html = '<option value="">请选择或搜索县/区</option>';
    $("#area").html(html);
 
    cityText = $("#city").find("option:selected").text();
    var value = $("#city").val();
    //异步加载下拉框数据
    $.post(WEB_ROOT+"dtArea/queryByParentId",{"id":value},function (data) {
      if(!data.success){
        layer.msg(data.msg)
      }else{
        var $html = "";
        if(data.data != null) {
          $.each(data.data, function (index, item) {
            $html += "<option value='" + item.id + "'>" + item.areaName + "</option>";
          });
          $("#area").append($html);
          //append后必须从新渲染
          form.render('select');
        }
      }
 
    });
 
  });
 
  //监听县区下拉框
  form.on('select(area)', function(dataObj){
    areaText = $("#area").find("option:selected").text();
  });
});

5.页面效果 

layui实现下拉框三级联动

附上联动sql下载地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 Javascript
layui添加动态菜单与选项卡
Jul 26 #Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 #Javascript
javascript中的闭包概念与用法实践分析
Jul 26 #Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 #Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 #Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 #jQuery
微信小程序—setTimeOut定时器的问题及解决
Jul 26 #Javascript
You might like
php中设置index.php文件为只读的方法
2013/02/06 PHP
PHP数组实例详解
2016/06/26 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
JS 面向对象的5钟写法
2009/07/31 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
Python深入学习之闭包
2014/08/31 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
HTML5未来发展趋势
2016/02/01 HTML / CSS
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
地理科学专业毕业生求职信
2013/10/15 职场文书
单位在职证明范本
2014/01/09 职场文书
银行类自荐信
2014/02/04 职场文书
党在我心中演讲稿
2014/09/02 职场文书
退税申请报告怎么写
2015/05/18 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
Java实现聊天机器人完善版
2021/07/04 Java/Android
浅谈Java父子类加载顺序
2021/08/04 Java/Android
SQL基础的查询语句
2021/11/11 MySQL