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 相关文章推荐
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
React路由管理之React Router总结
May 10 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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
德生9700DX电路分析
2021/03/02 无线电
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
文本链接逐个出现的js脚本
2007/12/12 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
js function定义函数使用心得
2010/04/15 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
Python中optparser库用法实例详解
2018/01/26 Python
python负载均衡的简单实现方法
2018/02/04 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
初中同学会致辞
2015/08/01 职场文书
经典爱情感言
2015/08/03 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
通过Python把学姐照片做成拼图游戏
2022/02/15 Python