追加后，bootstrap multiselect 在表中不起作用

Question

我面临一个问题，即在表 >> td 中添加一个新的多选框后，我无法制作引导多选框。我阅读了 StackOverflow 和其他社区上的多个线程，但我无法得到肯定的答案。我正在尝试在我的代码中单击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,});

Answer 1

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

演示代码：

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>