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/zh-hk/n/196218.html