layui实现下拉框三级联动

项目需要用获得的三级联动，自己整理了一下，做个记录

1.表结构设计

创建表“dt _ area”(“id”int(11)不为空自动增量注释"区域主键，` 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 _ INDEX=900001 DEFAULT CHARSET=utf8 COMMENT='区域字典；2.mybatis xml

选择id=' queryByParentId ' resultMap=' Base resultMap '参数类型=' Java。朗。' INTEGER '从dt_area中选择包含refid=' Base _ Column _ List '/其中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='省份lay-filter='省份lay-verify='必需' lay-search='选项值=' '请选择或搜索省/option/select/div class=' layui-input-inline ' select id=' city ' lay-filter=' city ' lay-verify=' required ' lay-search=' option value=' '请选择或搜索市/option/select/div class=' layui-input-inline ' select id=' area ' lay-filter=' area ' lay-verify='必需' lay-search='选项值=' '请选择或搜索县/区/option/select/div class=' layui-input-inline ' style=' width : 45%； input class=' layui-input ' id=' lay-verify=' required '占位符='请输入详细地址：城镇乡村街道门牌号码/input /div/div4.js

layui.use(['form '，' layer '，' jquery']，function(){ var form=layui.form，layer=parent.layer===undefined？layui.layer : parent.layer，$=layui . jqueryvar provinces text=var city text=var area text=//异步加载下拉框数据$.post(WeB _ ROOT ' DTarea/query ParentID '，{'id':0}，函数（数据){ if(！数据。成功){ layer。msg(数据。msg)} else { var $ html=' '；if(data.data！=null) { $ .每个(data.data，function (index，item){ $ html=' option value=' item。id ' ' '项。区域名称'/option '；});$(' #省份')。追加($ html)；//追加后必须从新渲染形式。渲染(“选择”)；} } });//监听省下拉框form.on('select(省份)'，函数(dataObj){ //移除城市下拉框所有选项$('#city ').empty()；var cityHtml='选项值=' '请选择或搜索市/option '；$('#city ').html(城市HTMl)；var areaHtml='选项值=' '请选择或搜索县/区/option '；$('#area ').html(AreHTML)；省份文本=$(' #省份')。查找(“option:selected”).text()；定义变量值=$(' #省份')。val()；//异步加载下拉框数据$.post(WeB _ ROOT ' DTarea/queryParentId '，{'id':value}，function (data) { if(！数据。成功){ layer。msg(数据。msg)} else { var $ html=' '；if(data.data！=null) { $ .每个(data.data，function (index，item){ $ html=' option value=' item。id ' ' '项。区域名称'/option '；});$('#city ').追加($ html)；//追加后必须从新渲染形式。渲染(“选择”)；} } });});//监听市下拉框form.on('select(city)'，function(dataObj){ //移除县区下拉框所有选项$('#area ').empty()；var html='选项值=' '请选择或搜索县/区/option '；$('#area ').html(html)；cityText=$('#city ').查找(“option:selected”).text()；定义变量值=$('#city ').val()；//异步加载下拉框数据$.post(WeB _ ROOT ' DTarea/queryParentId '，{'id':value}，function (data) { if(！数据。成功){ layer。msg(数据。msg)} else { var $ html=' '；if(data.data！=null) { $ .每个(data.data，function (index，item){ $ html=' option value=' item。id ' ' '项。区域名称'/option '；});$('#area ').追加($ html)；//追加后必须从新渲染形式。渲染(“选择”)；} } });});//监听县区下拉框form.on('select(area)'，function(DataObj){ AreText=$(' # area ')).查找(“option:selected”).text()；});});5.页面效果

附上联动结构化查询语言下载地址

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