layui select多级联动

在layui中实现多级联动的select可以通过下拉框的change事件来实现。

首先，需要在HTML中定义多个select框，如下所示：

<select id="province">
  <option value="">请选择省份</option>
  <option value="北京市">北京市</option>
  <option value="上海市">上海市</option>
  <option value="广东省">广东省</option>
</select>
<select id="city">
  <option value="">请选择城市</option>
</select>
<select id="district">
  <option value="">请选择区县</option>
</select>

接下来，在JavaScript中监听省份select框的change事件，根据选中的省份加载对应的城市列表，如下所示：

// 省份select框的change事件
$('#province').on('change', function() {
  var province = $(this).val();
  // 根据省份加载对应的城市列表
  $.ajax({
    url: 'loadCity.php',
    method: 'post',
    data: {province: province},
    dataType: 'json',
    success: function(data) {
      // 清空城市select框中的选项
      $('#city').empty().append('<option value="">请选择城市</option>');
      // 清空区县select框中的选项
      $('#district').empty().append('<option value="">请选择区县</option>');
      // 遍历城市列表，添加到城市select框中
      $.each(data, function(index, city) {
        $('#city').append('<option value="' + city.value + '">' + city.label + '</option>');
      });
    }
  });
});

在loadCity.php文件中，根据传递的参数省份province，查询对应的城市列表并返回，格式如下：

[
  {"value": "北京市", "label": "北京市"},
  {"value": "天津市", "label": "天津市"},
  {"value": "河北省", "label": "河北省"}
]

最后，在城市select框的change事件中，根据选中的城市加载对应的区县列表，如下所示：

// 城市select框的change事件
$('#city').on('change', function() {
  var city = $(this).val();
  // 根据城市加载对应的区县列表
  $.ajax({
    url: 'loadDistrict.php',
    method: 'post',
    data: {city: city},
    dataType: 'json',
    success: function(data) {
      // 清空区县select框中的选项
      $('#district').empty().append('<option value="">请选择区县</option>');
      // 遍历区县列表，添加到区县select框中
      $.each(data, function(index, district) {
        $('#district').append('<option value="' + district.value + '">' + district.label + '</option>');
      });
    }
  });
});

在loadDistrict.php文件中，根据传递的参数城市city，查询对应的区县列表并返回，格式如下：

[
  {"value": "东城区", "label": "东城区"},
  {"value": "西城区", "label": "西城区"},
  {"value": "朝阳区", "label": "朝阳区"}
]

以上就是layui中实现多级联动select的方法，希望能对你有所帮助。