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 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.页面效果 

附上联动sql下载地址

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