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轻松处理json文本方便而老古
Feb 17 Javascript
js日期时间补零的小例子
Mar 05 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
JS实现炫酷轮播图
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
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
javascript 定义新对象方法
2010/02/20 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
利用ctypes提高Python的执行速度
2016/09/09 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
laravel使用redis队列实例讲解
2021/03/23 PHP
银行行长竞聘演讲稿
2014/04/23 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
授权委托书
2015/01/28 职场文书
教师岗位职责
2015/02/03 职场文书
团员个人年度总结
2015/02/26 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
httpclient调用远程接口的方法
2022/08/14 Java/Android