layui实现下拉框三级联动_javascript技巧_脚本之家

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

layui实现下拉框三级联动_javascript技巧_脚本之家。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

CREATE TABLE `dt_area`  NOT NULL AUTO_INCREMENT COMMENT '区域主键', `area_name` varchar DEFAULT NULL COMMENT '区域名称', `area_code` varchar DEFAULT NULL COMMENT '区域代码', `area_short` varchar DEFAULT NULL COMMENT '区域简称', `area_is_hot` varchar DEFAULT NULL COMMENT '是否热门', `area_sequence` int DEFAULT NULL COMMENT '区域序列', `area_parent_id` int DEFAULT NULL COMMENT '上级主键', `init_date` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '初始时间', PRIMARY KEY , KEY `parent_id`  USING HASH) ENGINE=InnoDB AUTO_INCREMENT=900001 DEFAULT CHARSET=utf8 COMMENT='区域字典';
 select  from dt_area where area_parent_id = #{id,jdbcType=INTEGER}

 地址   请选择或搜索省     请选择或搜索市     请选择或搜索县/区     

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  { if{ layer.msg }else{ var $html = ""; if { $.each(data.data, function  { $html += "" + item.areaName + ""; }); $.append; //append后必须从新渲染 form.render; //监听省下拉框 form.on', function{ //移除城市下拉框所有选项 $; var cityHtml = '请选择或搜索市'; $.html; var areaHtml = '请选择或搜索县/区'; $.html; provinceText = $.find.text(); var value = $; //异步加载下拉框数据 $.post(WEB_ROOT+"dtArea/queryByParentId",{"id":value},function  { if{ layer.msg }else{ var $html = ""; if { $.each(data.data, function  { $html += "" + item.areaName + ""; }); $.append; //append后必须从新渲染 form.render; //监听市下拉框 form.on', function{ //移除县区下拉框所有选项 $; var html = '请选择或搜索县/区'; $; cityText = $.find.text(); var value = $; //异步加载下拉框数据 $.post(WEB_ROOT+"dtArea/queryByParentId",{"id":value},function  { if{ layer.msg }else{ var $html = ""; if { $.each(data.data, function  { $html += "" + item.areaName + ""; }); $.append; //append后必须从新渲染 form.render; //监听县区下拉框 form.on', function{ areaText = $.find.text;

附上联动sql下载地址

2.mybatis xml

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图