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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 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中for循环语句的几种变型
2006/11/26 PHP
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
js css样式操作代码(批量操作)
2009/10/09 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
Python中encode()方法的使用简介
2015/05/18 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
python解析含有重复key的json方法
2019/01/22 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
英语专业毕业个人求职自荐信
2013/09/21 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
小学生家长评语大全
2014/02/10 职场文书
规范化管理年活动总结
2014/08/29 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
工资收入证明
2014/10/07 职场文书
道士塔读书笔记
2015/06/30 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
深入理解python多线程编程
2021/04/18 Python