layui联动select

layui 提供了一个很方便的联动下拉框组件，可以实现多级联动。下面是一个简单的示例代码。

HTML 代码：

<div class="layui-form-item">
  <label class="layui-form-label">省份</label>
  <div class="layui-input-inline">
    <select id="province" lay-filter="province">
      <option value="">请选择省份</option>
      <option value="北京市">北京市</option>
      <option value="天津市">天津市</option>
      <option value="河北省">河北省</option>
      <option value="山西省">山西省</option>
      <option value="内蒙古自治区">内蒙古自治区</option>
    </select>
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">城市</label>
  <div class="layui-input-inline">
    <select id="city" lay-filter="city">
      <option value="">请选择城市</option>
    </select>
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">区县</label>
  <div class="layui-input-inline">
    <select id="district" lay-filter="district">
      <option value="">请选择区县</option>
    </select>
  </div>
</div>

JavaScript 代码：

layui.use(['form', 'jquery'], function () {
  var form = layui.form;
  var $ = layui.jquery;

  // 省份下拉框被选中时，加载城市下拉框
  form.on('select(province)', function (data) {
    var province = data.value;
    if (province) {
      $.ajax({
        url: '/getCity',
        type: 'POST',
        data: {province: province},
        success: function (data) {
          var options = '<option value="">请选择城市</option>';
          for (var i = 0; i < data.length; i++) {
            options += '<option value="' + data[i] + '">' + data[i] + '</option>';
          }
          $('#city').html(options);
          form.render('select');
        }
      });
    } else {
      $('#city').html('<option value="">请选择城市</option>');
      form.render('select');
    }
  });

  // 城市下拉框被选中时，加载区县下拉框
  form.on('select(city)', function (data) {
    var city = data.value;
    if (city) {
      $.ajax({
        url: '/getDistrict',
        type: 'POST',
        data: {city: city},
        success: function (data) {
          var options = '<option value="">请选择区县</option>';
          for (var i = 0; i < data.length; i++) {
            options += '<option value="' + data[i] + '">' + data[i] + '</option>';
          }
          $('#district').html(options);
          form.render('select');
        }
      });
    } else {
      $('#district').html('<option value="">请选择区县</option>');
      form.render('select');
    }
  });
});

这段代码实现了三级联动：当省份下拉框选中某个选项时，会向服务器发送请求获取该省份下的城市列表，然后将城市下拉框的选项更新；当城市下拉框选中某个选项时，会向服务器发送请求获取该城市下的区县列表，然后将区县下拉框的选项更新。