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 相关文章推荐
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
js实现分割上传大文件
Mar 09 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
JS实现随机抽取三人
Nov 06 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
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
星际RPG字典
2020/03/04 星际争霸
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
简述Python中的进程、线程、协程
2016/03/18 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Python continue继续循环用法总结
2018/06/10 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
Python实现微信小程序支付功能
2019/07/25 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
综合素质的自我鉴定
2013/10/07 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
升学宴答谢词
2015/01/05 职场文书
仙境之桥观后感
2015/06/16 职场文书
python基础之错误和异常处理
2021/10/24 Python
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python