layui动态加载二级联动

动态加载二级联动
使用layui动态加载二级联动
html代码

 <form  class="layui-form "method="POST">
 <div class="layui-form">
            <label class="layui-form-label">市</label>
            <div class="layui-input-inline" id="billTypeDiv">
               //数据库市的id
                <select name="cityId" id="cityId" class="layui-input" lay-filter="buildingFilter" lay-verify="required" lay-reqText="请选择市类型">
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline" id="billType">
               //数据库县的id
                <select name="countyId" id="countyId" class="layui-input" lay-filter="houseIdFilter" lay-verify="required" lay-reqText="请选择县类型">
                    <option value="">请选择县</option>
                </select>
            </div>
        </div>
       </form>

js代码

     layui.use(['form','jquery','table','laydate','layer','upload'],function () {
          var form = layui.form;
          var $ = layui.jquery;
          var table = layui.table;
          var laydate = layui.laydate;
          var layer = layui.layer;
          var upload = layui.upload;
          
     //动态加载市到下拉框
   $.get("查询城市的路径",function(res){
              var html = "";
              //循环遍历集合
              for (let i = 0; i < res.data.length; i++) {
              //拼接
                  html +="<option value='"+res.data[i].id+"'>"+res.data[i].cityName+"</option>"
              }
              //将网页代码追加到下拉列表中
              $("[name='cityId']").append(html);
              //更新渲染select下拉框
              layui.form.render("select");
          },"json");

          form.on('select(buildingFilter)',function(data){
              $.get("查询县的路径",function(res){
                  var html = "";
                 //清空县内容
                  $("#wardId").empty();
                  //循环遍历集合
                  for (let i = 0; i < res.data.length; i++) {
                      if(data.value==res.data[i].inpatientAreaId){
                          html +="<option value='"+res.data[i].id+"'>"+res.data[i].countyName+"</option>"
                      }
                  }
                  //将网页代码追加到下拉列表中
                  $("[name='countyId']").append(html);
                  //更新渲染select下拉框
                  layui.form.render("select");
              },"json");
              return false;

          })
          })

市县均是单表查询，先把市和县分别动态加载到下拉框，在根据关联的ID进行拼接。用if判断，市和县的ID是否相等，如果相等，再把县动态加载进去，否则，不加载。
后台只需返回json格式即可
如果出现跨域问题，只需在控制器上加个@CrossOrigin 注解即可