layui下拉框动态赋值详解

一、下拉框的基本使用

下拉框是Web开发中常用的元素，layui通过laytpl模块封装了一个下拉框组件laytpl.layuiSelect，在html中通过select标签和option标签来构造下拉框，例如：

<select name="city" lay-verify="required">
  <option value="">请选择城市</option>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">广州</option>
  <option value="4">深圳</option>
  <option value="5">杭州</option>
</select>

通过name属性标识下拉框，lay-verify属性表示选择下拉框必须选择一个选项。

二、下拉框动态赋值的实现

下拉框的选项一般需要在后端获取数据并在前端渲染，或者根据前端的操作而动态生成。

1. 后端渲染

如果使用后端渲染，例如使用jinja2模板引擎，可以将数据传递给模板，在模板中进行遍历渲染。示例如下：

<select name="city">
{% for city in city_list %}
  <option value="{{ city.id }}">{{ city.name }}</option>
{% endfor %}
</select>

其中city_list是从后端获取的城市列表，通过for循环将选项渲染到下拉框中，value属性可以设置选项的值，option标签之间的内容显示在下拉框中。

2. 前端生成

如果需要在前端生成下拉框选项，可以通过ajax请求后端获取数据，然后使用laytpl.layuiSelect方法进行渲染。示例如下：

<div class="layui-form-item">
  <label class="layui-form-label">城市选择</label>
  <div class="layui-input-inline">
    <select id="city_select" lay-filter="city">
    </select>
  </div>
</div>

<script type="text/javascript">
  layui.use(['layer', 'form', 'laytpl'], function() {
    var layer = layui.layer;
    var form = layui.form;
    var laytpl = layui.laytpl;

    $.ajax({
      url: '/api/city_list',
      type: 'GET',
      dataType: 'json',
      success: function(res) {
        if (res.code == 0) {
          var data = res.data;
          var html = '';
          for (var i = 0; i < data.length; i++) {
            html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
          }
          $('#city_select').html(html);
          form.render('select', 'city_select');
        } else {
          layer.msg(res.msg, {icon: 2});
        }
      },
      error: function(xhr, textStatus, errorThrown) {
        layer.msg('网络错误', {icon: 2});
      }
    });
  });
</script>

在页面加载完成后，通过ajax请求获取城市列表，然后生成下拉框选项。需要注意的是laytpl.layuiSelect方法的第一个参数为dom元素的id。

三、下拉框动态赋值的进阶应用

1. 动态改变选项

在前端生成下拉框选项时，可以根据用户的选择而动态改变下拉框中的选项。示例如下：

<div class="layui-form-item">
  <label class="layui-form-label">省份选择</label>
  <div class="layui-input-inline">
    <select id="province_select" lay-filter="province">
      <option value="">请选择省份</option>
      <option value="1">广东省</option>
      <option value="2">浙江省</option>
      <option value="3">江苏省</option>
    </select>
  </div>
</div>

<div class="layui-form-item">
  <label class="layui-form-label">城市选择</label>
  <div class="layui-input-inline">
    <select id="city_select" lay-filter="city">
      <option value="">请选择城市</option>
    </select>
  </div>
</div>

<script type="text/javascript">
  layui.use(['layer', 'form', 'laytpl'], function() {
    var layer = layui.layer;
    var form = layui.form;
    var laytpl = layui.laytpl;

    var city_data = {
      '1': [{'id': '1', 'name': '广州'}, {'id': '2', 'name': '深圳'}, {'id': '3', 'name': '珠海'}],
      '2': [{'id': '4', 'name': '杭州'}, {'id': '5', 'name': '宁波'}, {'id': '6', 'name': '温州'}],
      '3': [{'id': '7', 'name': '南京'}, {'id': '8', 'name': '苏州'}, {'id': '9', 'name': '无锡'}]
    };

    form.on('select(province)', function(data) {
      var province_id = data.value;
      var html = '';
      for (var i = 0; i < city_data[province_id].length; i++) {
        html += '<option value="' + city_data[province_id][i].id + '">' + city_data[province_id][i].name + '</option>';
      }
      $('#city_select').html(html);
      form.render('select', 'city_select');
    });
  });
</script>

在选择省份时，根据不同的省份生成不同的城市选项，动态改变城市选择下拉框中的选项。

2. 选项搜索

在下拉框option过多时，可以增加搜索功能，用户可以根据关键字搜索相关选项。layui的laytpl.layuiSelect组件提供了search属性，可以开启下拉框的搜索功能。示例如下：

<div class="layui-form-item">
  <label class="layui-form-label">城市选择</label>
  <div class="layui-input-inline">
    <select id="city_select" lay-filter="city" search>
      <option value="">请选择城市</option>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3">广州</option>
      <option value="4">深圳</option>
      <option value="5">杭州</option>
    </select>
  </div>
</div>

在上面的代码中，通过在select标签中添加search属性开启下拉框搜索功能。

3. 下拉框加载更多数据

在下拉框options过多或者需要动态加载数据时，可以使用laypage模块实现分页加载。首先需要将select标签替换成div标签，然后通过laypage模块分页展示option选项。示例如下：

<div class="layui-form-item">
  <label class="layui-form-label">城市选择</label>
  <div class="layui-input-inline">
    <div id="city_select"></div>
  </div>
</div>

<script type="text/javascript">
  layui.use(['layer', 'form', 'laytpl', 'laypage'], function() {
    var layer = layui.layer;
    var form = layui.form;
    var laytpl = layui.laytpl;
    var laypage = layui.laypage;

    var page_size = 5;

    $.ajax({
      url: '/api/city_list',
      type: 'GET',
      dataType: 'json',
      success: function(res) {
        if (res.code == 0) {
          var data = res.data;
          var html = '';
          for (var i = 0; i < data.length; i++) {
            html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
          }
          $('#city_select').html(html);
          form.render('div', 'city_select');
          laypage.render({
            elem: 'city_select',
            count: data.length,
            limit: page_size,
            layout: ['prev', 'page', 'next', 'refresh', 'skip'],
            jump: function(obj, first) {
              if (!first) {
                var html = '';
                for (var i = (obj.curr - 1) * page_size; i < obj.curr * page_size && i < data.length; i++) {
                  html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                }
                $('#city_select').html(html);
                form.render('div', 'city_select');
              }
            }
          });
        } else {
          layer.msg(res.msg, {icon: 2});
        }
      },
      error: function(xhr, textStatus, errorThrown) {
        layer.msg('网络错误', {icon: 2});
      }
    });
  });
</script>

在上面的代码中，使用laypage.layuiRender方法将城市列表分页展示，在分页切换时动态加载数据。

四、总结

通过本文的讲解，我们详细了解了layui下拉框动态赋值的实现方法。我们可以使用后端渲染或前端生成来动态生成下拉框选项，也可以使用下拉框的进阶功能，例如动态改变选项、选项搜索、下拉框加载更多数据等。希望本文能够帮助大家更好地使用layui框架。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/196218.html