layui 下拉框内容来自数据库

要实现从数据库中动态获取下拉框的选项，我们需要使用 layui 的 form 模块，以及 Ajax 技术从后台获取数据。以下是一个简单的示例：

HTML 代码：

<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>

JavaScript 代码：

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

  // 从后台获取下拉框选项数据
  $.get('/getCityList', function(res) {
    if (res.code === 0) {
      var cityList = res.data;
      var html = '';
      cityList.forEach(function(city) {
        html += '<option value="' + city.id + '">' + city.name + '</option>';
      });
      $('#city').html(html);
      form.render('select');
    } else {
      layer.msg(res.msg, {icon: 2, time: 1500});
    }
  });
});

在上述代码中，我们使用了 jQuery 的 Ajax 方法从后台获取城市列表数据，然后遍历数据生成下拉框选项的 HTML 代码，并通过 $('#city').html(html) 方法将其添加到下拉框中。最后，调用 form.render('select') 方法重新渲染下拉框即可。

需要注意的是，在后台接口中，需要返回一个 JSON 格式的数据，其中 code 表示接口调用状态，0 表示成功，1 表示失败；msg 表示接口调用结果提示信息；data 表示接口返回的数据。例如：

{
  "code": 0,
  "msg": "获取城市列表成功",
  "data": [
    {"id": 1, "name": "北京"},
    {"id": 2, "name": "上海"},
    {"id": 3, "name": "广州"},
    {"id": 4, "name": "深圳"},
    {"id": 5, "name": "杭州"},
    {"id": 6, "name": "成都"},
    {"id": 7, "name": "武汉"}
  ]
}

其中的数据可以根据实际需求进行修改。