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类
Sep 08 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
Vue实现可移动水平时间轴
Jun 29 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
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
PHP 裁剪图片
2021/03/09 PHP
splice slice区别
2006/10/09 Javascript
jquery 上下滚动广告
2009/06/17 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
js 操作符汇总
2014/11/08 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
python单例模式实例解析
2018/08/28 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
简单了解python中的与或非运算
2019/09/18 Python
财务会计人员岗位职责
2013/11/30 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
学习作风建设心得体会
2014/10/22 职场文书
关于长城的导游词
2015/01/30 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
个人更名证明
2015/06/23 职场文书
2016年情人节问候语
2015/11/11 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL