layui动态渲染select(地址三联动)

layui简单动态渲染select数据

• html代码

<div class="layui-form-item">
  <label class="layui-form-label">省市区</label>
  <div class="layui-input-inline flex">
    <select name="province" lay-verify="required" lay-filter="province">
      <option value="">请选择省</option>
      <!-- 这里可以后端动态渲染 省 数据,并判断选择默认值 -->
      <option value="北京市">北京市</option> 
      <option value="广东省">广东省</option> 
    </select>
    <select name="city" lay-verify="required" lay-filter="city" id="city">
      <option value="">请选择市</option>
      <!-- 这里可以后端动态渲染 市 数据,并判断选择默认值 -->
    </select>
    <select name="area" lay-verify="required" lay-filter="area" id="area">
      <option value="">请选择区</option>
      <!-- 这里可以后端动态渲染 区 数据,并判断选择默认值 -->
    </select>
  </div>
</div>

• javascript代码

<script>
layui.use(['jquery','form'], function(){  // 加载模块
    let $ = layui.jquery;
    form = layui.form;
    // 监听 省
    form.on('select(province)', function(data){
      let province = data.value
      $.post('/admin/getCity',{
        province:province, // 省名称
        _token:"{{ csrf_token() }}"
        },function(cityData){
          let firstCity = cityData[0].item
          // 判断第一个城市是否还有 区/县  并进行渲染
          $.post('/admin/getArea',{
            city:firstCity, // 城市名称
            _token:"{{ csrf_token() }}"
            },function(areaData){
              // 清空值
              $("select[name=area]").find("option").remove();
              showData('area',areaData)
              form.render('select') // layui重新渲染select的方法
          })
          // 清空即将要渲染的select标签
          $("select[name=city]").find("option").remove();
          $("select[name=area]").find("option").remove();
          showCategory('city',cityData)
          form.render('select') // layui重新渲染select的方法
      })
    });
    // 监听市 
    form.on('select(city)', function(data){
      let city = data.value
      $.post('/admin/getArea',{
        city:city, // 城市名称
        _token:"{{ csrf_token() }}"
        },function(areaData){
          // 清空值
          $("select[name=area]").find("option").remove();
          showData('area',areaData)
          form.render('select')
      })
    });
});
// 封装的渲染的方法
function showData(elem,data) {
  let $ = layui.jquery
  let form = layui.form
  // 进行循环渲染select
  $(data).each(function (i, n) {
    $("#"+elem+"").append("<option value='" + n.item + "'>" + n.item + "</option>")
    // 这里的item是后端定义的数据字段名,根据你们的情况进行更改喔
  });
  form.render('select') // layui重新渲染select的方法
}
</script>

还不懂的小伙伴可以跟我交流喔
有用的麻烦点个赞喔 : )