layui多级联动下拉框的实现_layui实现下拉框三级联动

项目需要用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

from dt_area

where area_parent_id = #{id,jdbcType=INTEGER}

根据上级主键查询

3.页面元素

地址

请选择或搜索省

请选择或搜索市

请选择或搜索县/区

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 += "" + item.areaName + "";

});

$("#province").append($html);

//append后必须从新渲染

form.render('select');

}

}

});

//监听省下拉框

form.on('select(province)', function(dataObj){

//移除城市下拉框所有选项

$("#city").empty();

var cityHtml = '请选择或搜索市';

$("#city").html(cityHtml);

var areaHtml = '请选择或搜索县/区';

$("#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 += "" + item.areaName + "";

});

$("#city").append($html);

//append后必须从新渲染

form.render('select');

}

}

});

});

//监听市下拉框

form.on('select(city)', function(dataObj){

//移除县区下拉框所有选项

$("#area").empty();

var html = '请选择或搜索县/区';

$("#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 += "" + item.areaName + "";

});

$("#area").append($html);

//append后必须从新渲染

form.render('select');

}

}

});

});

//监听县区下拉框

form.on('select(area)', function(dataObj){

areaText = $("#area").find("option:selected").text();

});

});

5.页面效果

622f32d1be184e4c5d39c4865ed0a73d.png

附上联动sql下载地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

weixin_39722759

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值