动态生成下拉列表中Select2插件搜索功能失效求助

云上老周

2026-8-7

解决Select2在动态生成下拉列表中失效的问题

问题场景

尝试使用Select2插件为动态生成的下拉列表启用搜索功能，但插件完全无法工作，页面源代码如下：

HTML代码

<div class="table-responsive">
  <table style="text-align: center" id="dynamicAddRemove">
    <tr style="background-color: #007398; color: white; text-align: center">
      <th class="wd-15p fontColor">الحساب</th>
      <th class="wd-15p fontColor">مدين</th>
      <th class="wd-15p fontColor">دائن</th>
      <th class="wd-15p fontColor">وصف</th>
      <th class="wd-10p fontColor"></th>
    </tr>
    <tr>
      <td class="td">
        <select
          class="form-control select_acount js-example-basic-single"
          name="account[]"
          required
        >
          <option value="1">--1--</option>
          <option value="2">--2--</option>
          <option value="3">--3--</option>
          <option value="4">--4--</option>
          <option value="5">--5--</option>
          <option value="6">--6--</option>
        </select>
      </td>
      <td class="td">
        <input
          type="number"
          name="debtor[]"
          id="fname"
          class="form-control debtor arabicNumbers"
          onkeydown="return event.keyCode !== 69"
          required
        />
      </td>
      <td class="td">
        <input
          type="number"
          name="creditor[]"
          id="james"
          class="form-control creditor arabicNumbers"
          onkeydown="return event.keyCode !== 69"
          required
        />
      </td>
      <td class="td">
        <input type="text" name="description[]" class="form-control" required />
      </td>
      <td>
        <input type="text" name="mount[]" class="form-control mount" required />
      </td>
      <td class="td2">
        <button type="button" name="add" id="add-btn" class="btn btn-success">
          <i class="fas fa-plus"></i>
        </button>
      </td>
    </tr>
  </table>
</div>

原引入及初始化代码

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
  $(document).ready(function() {
    $('.js-example-basic-single').select2();
});
</script>

问题原因

当前代码仅在页面首次加载时初始化了已存在的下拉框，动态添加的新下拉列表不会自动触发Select2初始化——因为这些元素是在页面加载完成后才被创建的，不在初始的DOM选择范围内。

此外，原代码中存在语法错误：<script src="..."></script></script>多了一个闭合标签，会导致后续JS执行异常。

解决方案

修正语法错误，确保资源引入顺序正确（先引入jQuery，再引入Select2）；
封装Select2初始化函数，方便重复调用；
在动态添加新行后，立即对新生成的下拉框执行Select2初始化。

修改后的完整代码

<!-- 依赖资源引入 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<div class="table-responsive">
  <table style="text-align: center" id="dynamicAddRemove">
    <tr style="background-color: #007398; color: white; text-align: center">
      <th class="wd-15p fontColor">الحساب</th>
      <th class="wd-15p fontColor">مدين</th>
      <th class="wd-15p fontColor">دائن</th>
      <th class="wd-15p fontColor">وصف</th>
      <th class="wd-10p fontColor"></th>
    </tr>
    <tr>
      <td class="td">
        <select
          class="form-control select_acount js-example-basic-single"
          name="account[]"
          required
        >
          <option value="1">--1--</option>
          <option value="2">--2--</option>
          <option value="3">--3--</option>
          <option value="4">--4--</option>
          <option value="5">--5--</option>
          <option value="6">--6--</option>
        </select>
      </td>
      <td class="td">
        <input
          type="number"
          name="debtor[]"
          class="form-control debtor arabicNumbers"
          onkeydown="return event.keyCode !== 69"
          required
        />
      </td>
      <td class="td">
        <input
          type="number"
          name="creditor[]"
          class="form-control creditor arabicNumbers"
          onkeydown="return event.keyCode !== 69"
          required
        />
      </td>
      <td class="td">
        <input type="text" name="description[]" class="form-control" required />
      </td>
      <td>
        <input type="text" name="mount[]" class="form-control mount" required />
      </td>
      <td class="td2">
        <button type="button" name="add" id="add-btn" class="btn btn-success">
          <i class="fas fa-plus"></i>
        </button>
      </td>
    </tr>
  </table>
</div>

<script>
// 封装Select2初始化函数
function initSelect2() {
  $('.js-example-basic-single').select2({
    placeholder: "选择账户",
    allowClear: true
  });
}

$(document).ready(function() {
  // 初始化页面已有的下拉框
  initSelect2();

  // 动态添加行逻辑
  $('#add-btn').click(function() {
    // 构造新行HTML，保留select的类名js-example-basic-single
    var newRow = `
    <tr>
      <td class="td">
        <select
          class="form-control select_acount js-example-basic-single"
          name="account[]"
          required
        >
          <option value="1">--1--</option>
          <option value="2">--2--</option>
          <option value="3">--3--</option>
          <option value="4">--4--</option>
          <option value="5">--5--</option>
          <option value="6">--6--</option>
        </select>
      </td>
      <td class="td">
        <input
          type="number"
          name="debtor[]"
          class="form-control debtor arabicNumbers"
          onkeydown="return event.keyCode !== 69"
          required
        />
      </td>
      <td class="td">
        <input
          type="number"
          name="creditor[]"
          class="form-control creditor arabicNumbers"
          onkeydown="return event.keyCode !== 69"
          required
        />
      </td>
      <td class="td">
        <input type="text" name="description[]" class="form-control" required />
      </td>
      <td>
        <input type="text" name="mount[]" class="form-control mount" required />
      </td>
      <td class="td2">
        <button type="button" name="remove" class="btn btn-danger remove-btn">
          <i class="fas fa-minus"></i>
        </button>
      </td>
    </tr>
    `;
    // 添加新行到表格
    $('#dynamicAddRemove').append(newRow);
    // 初始化新生成的下拉框
    initSelect2();

    // 删除行逻辑（可选）
    $('.remove-btn').off('click').on('click', function() {
      $(this).closest('tr').remove();
    });
  });
});
</script>

关键说明

依赖引入顺序不能错：必须先引入jQuery，再引入Select2，否则插件无法正常运行；
每次动态添加下拉框后，必须调用初始化函数，让Select2识别新元素；
封装初始化函数可避免重复代码，提升维护性。

内容的提问来源于stack exchange，提问作者user15415284

动态生成下拉列表中Select2插件搜索功能失效求助

问题场景 #

HTML代码 #

原引入及初始化代码 #

问题原因 #

解决方案 #

修改后的完整代码 #

关键说明 #