Bootstrap Multiselect表格追加后失效问题求助

云原生阿岚

2026-5-9

解决动态添加Bootstrap Multiselect下拉框无法工作的问题

Hey there, let's fix this issue step by step. The core problem here is that dynamically added elements don't get initialized with the Bootstrap Multiselect plugin—you only run the initialization once on page load, which only affects the original dropdown. Plus, there are a couple of small bugs in your code that we need to iron out.

1. 问题根源

当你在页面加载时执行 $('#select1,#select2,.select2').multiselect(...)，这段代码只会对当时DOM中已存在的下拉框生效。后续动态添加的新下拉框并没有执行初始化逻辑，所以无法正常工作。另外代码里还有几处细节错误需要修正。

2. 具体修复方案

a. 移除重复ID

你在动态生成的行里使用了 id="select2"，但HTML中ID必须唯一。我们改用共享类名（比如 select-multiselect）来标识所有下拉框。

b. 修正删除按钮的事件委托选择器

你当前的删除按钮选择器少了一个点：$("complaint_Machinetable") 应该改为 $(".complaint_Machinetable")（因为这是类选择器）。

c. 对新添加的下拉框初始化Multiselect

在把新行追加到表格后，立即找到该行内的新下拉框并执行Multiselect初始化。

d. 优化rowspan更新逻辑

确保rowspan的数值能正确反映当前行数，删除行时也要同步更新。

3. 完整修复代码

HTML部分

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />

<table class="table table-striped table-hover table-bordered complaint_Machinetable">
  <tr>
    <td class="fields_machineData">1</td>
    <td><input class="form-control" type="text" maxlength="30" name="machineIDs_detail[]" placeholder="Machine ID" /></td>
    <td>
      <select name="complaint[]" multiple class="form-control select-multiselect">
        <option value="12345">This is Complaint 1</option>
        <option value="1234567890">This is Complaint 2</option>
      </select>
    </td>
    <td><button type="button" class="btn btn-success add_MoreMachine__button"><i class="fa fa-plus"></i></button></td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>

JavaScript部分

var maxMachineField = 10;
var xMachine = 1;

// 封装Multiselect初始化逻辑，避免重复代码
function initMultiselect($element) {
  $element.multiselect({
    nonSelectedText: 'Select Complaint',
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    buttonWidth: '400px',
    dropup: true,
    includeSelectAllOption: true,
  });
}

// 页面加载时初始化已存在的下拉框
$(document).ready(function() {
  initMultiselect($('.select-multiselect'));
});

// 添加新行逻辑
$('.add_MoreMachine__button').click(function() {
  if (xMachine < maxMachineField) {
    xMachine++;
    var newrowMachine = `
      <tr class="errorMachine">
        <td>${xMachine}</td>
        <td><input class="form-control" type="text" maxlength="30" name="machineIDs_detail[]" placeholder="Machine ID"/></td>
        <td>
          <select name="complaint[]" multiple class="form-control select-multiselect">
            <option value="12345">This is Complaint 1</option>
            <option value="1234567890">This is Complaint 2</option>
          </select>
        </td>
        <td><button type="button" class="btn btn-danger btn-circle float-right remove_Machinebutton"><i class="fa fa-minus"></i></button></td>
      </tr>
    `;
    var rowspanMachine = parseInt($('.fields_machineData').attr('rowspan')) + 1;
    $('.fields_machineData').attr('rowspan', rowspanMachine);
    // 追加新行并初始化其中的下拉框
    var $newRow = $(newrowMachine).insertAfter('.complaint_Machinetable tr:eq(0)');
    initMultiselect($newRow.find('.select-multiselect'));
  }
});

// 删除行逻辑
$(".complaint_Machinetable").on("click", ".remove_Machinebutton", function(e) {
  e.preventDefault();
  $(this).closest('tr').remove();
  xMachine--;
  // 更新rowspan数值
  var rowspanMachine = parseInt($('.fields_machineData').attr('rowspan')) - 1;
  $('.fields_machineData').attr('rowspan', rowspanMachine);
  // 可选：删除后重新编号行号
  $('.complaint_Machinetable tr td:first-child').each(function(index) {
    $(this).text(index + 1);
  });
});

4. 关键改动说明

封装初始化函数: 创建 initMultiselect 函数避免重复代码，更易维护。
动态初始化: 插入新行后，立即定位到新下拉框并执行初始化。
使用类名替代ID: 用 select-multiselect 类统一标识所有下拉框，避免ID冲突。
修正事件委托: 修复删除按钮的选择器错误，确保事件能正确绑定到动态生成的按钮上。
同步更新行信息: 删除行后同步更新rowspan和行号，保持界面一致性。

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