带搜索功能的Select Option在脚本函数中失效问题咨询

核心原因 #

静态渲染的<select>元素在页面加载完成时，会被Bootstrap的JS自动完成组件初始化（包括绑定搜索事件、生成配套DOM结构）；而通过JavaScript动态添加的<select>是在页面加载后才创建的，Bootstrap不会自动识别并初始化这些新元素，因此搜索功能无法生效。

另外你的代码存在语法错误：row.innerHTML的字符串用单引号包裹但包含换行，这会导致JavaScript解析报错，需要先修正。

解决方案 #

步骤1：修正字符串语法错误 #

将row.innerHTML的字符串改为用**反引号（`）**包裹的模板字符串，支持多行书写：

function add_fields() {
  const row = document.createElement("tr");
  // 用模板字符串替换单引号包裹的多行字符串，避免语法错误
  row.innerHTML = `
    <td>
      <select name="select" class="col-sm-12 custom-select custom-select-sm form-control" style="margin-top:5px;" placeholder="Select Item.." required>         
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </td>
  `;
  table.appendChild(row);
  
  // 步骤2：手动初始化动态添加的select组件
  const newSelect = row.querySelector('select');
  // 根据你使用的Bootstrap组件类型调用初始化方法
  // 情况1：使用bootstrap-select插件
  $(newSelect).selectpicker();
  // 情况2：使用Bootstrap 5原生自定义select（需引入bootstrap.bundle.js）
  // new bootstrap.Select(newSelect);
}

步骤2：手动初始化动态组件 #

根据你实际使用的Bootstrap组件类型，在添加新行后手动触发初始化：

• 若使用bootstrap-select插件：调用$(newSelect).selectpicker()，该方法会为新select绑定搜索事件并生成搜索框。
• 若使用Bootstrap 5原生自定义select：调用new bootstrap.Select(newSelect)，原生自定义select需要显式调用构造函数完成初始化。

补充说明 #

Bootstrap的交互组件（如带搜索的select、模态框等）都需要初始化才能正常工作，静态元素会在页面加载时自动完成初始化，而动态生成的元素必须手动触发初始化流程，否则组件的交互功能无法绑定到新元素上。

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