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 相关文章推荐
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 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
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
JS冒泡事件的快速解决方法
2013/12/16 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
py中的目录与文件判别代码
2008/07/16 Python
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
Python语言的12个基础知识点小结
2014/07/10 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
师德师风建设方案
2014/05/08 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
国庆庆典邀请函
2015/02/02 职场文书
公共场所卫生管理制度
2015/08/05 职场文书