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 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
vue中activated的用法
Jan 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之第四天
2006/10/09 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
微信支付开发告警通知实例
2016/07/12 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
jquery中动态效果小结
2010/12/16 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
商品陈列协议书
2014/09/29 职场文书
简历自我评价优缺点
2015/03/11 职场文书
MySQL优化之慢日志查询
2022/06/10 MySQL