举一个 layui 动态绑定下拉框 简单的例子

好的，下面是一个简单的 layui 动态绑定下拉框的例子：

HTML 代码：

<div class="layui-form-item">
  <label class="layui-form-label">省份</label>
  <div class="layui-input-block">
    <select name="province" lay-filter="province">
      <option value="">请选择省份</option>
      <option value="1">北京市</option>
      <option value="2">上海市</option>
    </select>
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">城市</label>
  <div class="layui-input-block">
    <select name="city" lay-filter="city">
      <option value="">请选择城市</option>
    </select>
  </div>
</div>

JavaScript 代码：

// 城市数据
var cityData = [
  {
    "id": 1,
    "name": "北京市",
    "cities": [
      {
        "id": 101,
        "name": "东城区"
      },
      {
        "id": 102,
        "name": "西城区"
      },
      {
        "id": 103,
        "name": "朝阳区"
      }
    ]
  },
  {
    "id": 2,
    "name": "上海市",
    "cities": [
      {
        "id": 201,
        "name": "黄浦区"
      },
      {
        "id": 202,
        "name": "徐汇区"
      },
      {
        "id": 203,
        "name": "长宁区"
      }
    ]
  }
];

// 动态绑定城市下拉框
var citySelect = $('select[name="city"]');
form.on('select(province)', function(data) {
  var provinceId = data.value;
  var province = $.grep(cityData, function(province) {
    return province.id == provinceId;
  })[0];
  citySelect.empty().append('<option value="">请选择城市</option>');
  $.each(province.cities, function(index, city) {
    citySelect.append('<option value="' + city.id + '">' + city.name + '</option>');
  });
  form.render('select');
});

这个例子中，我们在 HTML 中定义了两个下拉框，一个是省份下拉框，一个是城市下拉框。在 JavaScript 中，我们使用 layui 的 form 模块监听了省份下拉框的变化事件。当省份下拉框的值发生变化时，我们根据选择的省份动态绑定了城市下拉框的数据。最后，我们调用了 form.render('select') 方法，使下拉框的渲染生效。