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 相关文章推荐
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
简单分析javascript中的函数
Sep 10 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
vue+Element-ui前端实现分页效果
Nov 15 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中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
python中强大的format函数实例详解
2018/12/05 Python
flask应用部署到服务器的方法
2019/07/12 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
python数据类型强制转换实例详解
2020/06/22 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
优秀求职信
2014/05/29 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis