layui实现下拉框联动

1.html加载界面

<div class="layui-inline" style="margin-bottom: 15px;">
 <label class="layui-form-label">楼栋号：</label>
 <div class="layui-input-inline" style="width:100px">
  <select name="buildId" id="buildId"  lay-filter="buildingFilter" lay-search="">
   <option value=""></option>
  </select>
 </div>
</div>
<div class="layui-inline" style="margin-bottom: 15px;">
 <label class="layui-form-label" style="color: black">房门号：</label>
 <div class="layui-input-inline" style="width:100px">
  <select name="houseId" id="houseId" lay-filter="houseIdFilter" lay-search="">
   <option value=""></option>
  </select>
 </div>
</div>

2.js调方法

// 得到楼栋
function getBuilding() {
 $.ajax({
  url: this.api+"/WyStoriedBuilding/list",
  dataType: 'json',
  type: 'post',
  success: function (data) {
   $.each(data, function (index, item) {
    $('#buildId').append(new Option(item.name, item.id));// 下拉菜单里添加元素
   });
   layui.form.render("select");//重新渲染 固定写法
  }
 });
};
// 得到房门号
function getHousing(data) {
 var params={
  buildingId:data.value
 }
 //检查项目添加到下拉框中
 $.ajax({
  url: this.api+"/WyHousingInformation/getHousing",
  dataType: 'json',
  data : JSON.stringify(params),
  contentType: "application/json",  
  type: 'post',
  success: function (data) {
   $("#houseId").empty();//清空下拉框的值
   $.each(data, function (index, item) {
    $('#houseId').append(new Option(item.name, item.id));// 下拉菜单里添加元素
   });
   layui.form.render("select");//重新渲染 固定写法
  }
 });
};
// 联动
layui.use('form', function(){
 form.on('select(buildingFilter)', function(data){
  this.getHousing(data);
 });
});