bootstrap 追加后 table 多选不工作

Question

我遇到一个问题，在 table >> td.

中添加新的多选框后，我无法制作 bootstrap 多选框

我阅读了 Whosebug 和其他社区上的多个线程，但我无法得到肯定的答案。当我点击 PLUS BTN 新的 TR 时，我正在尝试在我的代码中附加多选框。但除了一个多选框外它不起作用。

请帮助我修复这段代码，它会按照我的预期工作，我正在解释..我在哪里做错了？

我的代码和错误截图如下：

var maxMachineField = 10;
var xMachine = 1;
$('.add_MoreMachine__button').click(function() {
  if (xMachine < maxMachineField) {
    xMachine++;
    newrowMachine = '<tr class="errorMachine"><td>2</td><td><input class="form-control" type="text" maxlength="30" id="txtMachineIDs" name="machineIDs_detail[]" placeholder="Machine ID"/></td><td><select id="select2" name="complaint[]" multiple class="form-control select2" ><option value="12345">This is Compaint 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);
    $('.complaint_Machinetable tr:eq(0)').after(newrowMachine);
  }
});
$(".complaint_Machinetable").on("click", ".remove_Machinebutton", function(e) {
  e.preventDefault();
  $(this).closest('tr').remove();
  xMachine--;
});

$('#select1,#select2,.select2').multiselect({
  nonSelectedText: 'Select Complaint',
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  buttonWidth: '400px',
  dropup: true,
  includeSelectAllOption: true,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<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>
<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 class="complaint_Machinetable">
    <td class="fields_machineData">1</td>
    <td><input class="form-control" type="text" maxlength="30" id="txtMachineIDs" name="machineIDs_detail[]" placeholder="Machine ID" /></td>
    <td>
      <select id="select1" name="complaint[]" multiple class="form-control">
        <option value="12345">This is Compaint 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>

Answer 1

实现上述目标的一种方法是将所有选项分配给某个变量，并使用 setOptions 将相同的选项传递给 mutliselect，然后在附加新 trs 时将 rebuild 传递给您的 mutliselect里面 table .

演示代码 :

var maxMachineField = 10;
var xMachine = 1;
$('.add_MoreMachine__button').click(function() {
  if (xMachine < maxMachineField) {
    xMachine++;
    //pass xmachnne value
    newrowMachine = '<tr class="errorMachine"><td>' + xMachine + '</td><td><input class="form-control" type="text" maxlength="30" id="txtMachineIDs" name="machineIDs_detail[]" placeholder="Machine ID"/></td><td><select id="select2" name="complaint[]" multiple class="form-control select2" ><option value="12345">This is Compaint 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);
    $('.complaint_Machinetable tr:last').after(newrowMachine);
  }
  //set option again
  $('.select2').multiselect('setOptions', selectconfig);
  $('.select2').multiselect('rebuild'); //rebuild
});
$(".complaint_Machinetable").on("click", ".remove_Machinebutton", function(e) {
  e.preventDefault();
  $(this).closest('tr').remove();
  xMachine--;
  resetValues(); //call to reset count

});

function resetValues() {
  var counter = 2; //initialze to 2 because 1 is fixed

  //looping through tr not first one
  $("table tr:not(:first)").each(function() {
    //find 1st td replace its counter
    $(this).find('td:eq(0)').text(counter);
    counter++;
  })
}
//your options
var selectconfig = {
  nonSelectedText: 'Select Complaint',
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  buttonWidth: '400px',
  dropup: true,
  includeSelectAllOption: true

}
//pass same to select2
$('.select2').multiselect('setOptions', selectconfig);
$(".select2").multiselect('rebuild'); //rebuild it

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<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>
<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 class="complaint_Machinetable">
    <td class="fields_machineData">1</td>
    <td><input class="form-control" type="text" maxlength="30" id="txtMachineIDs" name="machineIDs_detail[]" placeholder="Machine ID" /></td>
    <td>
      <select id="select1" name="complaint[]" multiple class="form-control select2">
        <option value="12345">This is Compaint 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>

bootstrap 追加后 table 多选不工作

bootstrap multiselect is not working in table after append

javascript

jquery

append

multi-select