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

问题原因 #

页面加载时仅对已存在的静态下拉框初始化了Select2插件，而通过按钮动态添加的下拉框是后续生成的DOM元素，没有被执行Select2的初始化逻辑，因此无法启用搜索功能。此外原代码中动态添加HTML字符串时存在语法错误（未转义换行），会导致JS执行失败。

解决方案 #

1. 将Select2初始化逻辑封装为可复用函数，避免重复代码。
2. 页面加载时初始化静态下拉框。
3. 动态添加新行后，立即对新生成的下拉框执行Select2初始化。
4. 修正动态HTML字符串的语法错误。

修改后的完整代码 #

HTML部分

<table id="dynamicAddRemove">
  <tr>
    <td>
      <select class="select_acount js-example-basic-single"> 
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
      </select>
    </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>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

JavaScript部分

// 封装Select2初始化函数
function initSelect2() {
  // 仅对未初始化过的select元素执行初始化
  $('.js-example-basic-single').not('.select2-hidden-accessible').select2({
    dropdownParent: $('#exampleModal')
  });
}

$(document).ready(function() {
  // 初始化静态下拉框
  initSelect2();

  // 添加新行按钮事件
  $("#add-btn").click(function() {
    // 使用模板字符串避免换行语法错误
    const newRow = `
      <tr>
        <td>
          <select class="select_acount js-example-basic-single">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>
          </select>
        </td> 
        <td>
          <button type="button" name="add" class="btn btn-danger remove-tr">
            <i class="fas fa-trash"></i>
          </button>
        </td>
      </tr>
    `;
    $("#dynamicAddRemove").append(newRow);
    // 初始化新添加的下拉框
    initSelect2();
  });
});

额外说明 #

• 使用.not('.select2-hidden-accessible')可以避免对已经初始化过的Select2元素重复执行初始化，防止出现异常。
• 模板字符串（`包裹）比传统字符串拼接更易维护，且无需转义换行符。
• 修正了原HTML中按钮标签内多余的</i>闭合标签，避免DOM结构错误。

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