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 硬盘序列号+其它硬件信息
Dec 23 Javascript
innerText和innerHTML 一些问题分析
May 18 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 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
PHP中PDO的错误处理
2011/09/04 PHP
php学习笔记之面向对象
2014/11/08 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
Python列表切片用法示例
2017/04/19 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
毕业生求职推荐信
2013/11/04 职场文书
幼儿园老师寄语
2014/04/03 职场文书
机关搬迁方案
2014/05/18 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
快速学习Oracle触发器和游标
2021/06/30 Oracle
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle