追加后，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() {&nbsp; if (xMachine < maxMachineField) {&nbsp; &nbsp; xMachine++;&nbsp; &nbsp; //pass xmachnne value&nbsp; &nbsp; 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>';&nbsp; &nbsp; var rowspanMachine = parseInt($('.fields_machineData').attr('rowspan')) + 1;&nbsp; &nbsp; $('.fields_machineData').attr('rowspan', rowspanMachine);&nbsp; &nbsp; $('.complaint_Machinetable tr:last').after(newrowMachine);&nbsp; }&nbsp; //set option again&nbsp; $('.select2').multiselect('setOptions', selectconfig);&nbsp; $('.select2').multiselect('rebuild'); //rebuild});$(".complaint_Machinetable").on("click", ".remove_Machinebutton", function(e) {&nbsp; e.preventDefault();&nbsp; $(this).closest('tr').remove();&nbsp; xMachine--;&nbsp; resetValues(); //call to reset count});function resetValues() {&nbsp; var counter = 2; //initialze to 2 because 1 is fixed&nbsp; //looping through tr not first one&nbsp; $("table tr:not(:first)").each(function() {&nbsp; &nbsp; //find 1st td replace its counter&nbsp; &nbsp; $(this).find('td:eq(0)').text(counter);&nbsp; &nbsp; counter++;&nbsp; })}//your optionsvar selectconfig = {&nbsp; nonSelectedText: 'Select Complaint',&nbsp; enableFiltering: true,&nbsp; enableCaseInsensitiveFiltering: true,&nbsp; buttonWidth: '400px',&nbsp; dropup: true,&nbsp; 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">&nbsp; <tr class="complaint_Machinetable">&nbsp; &nbsp; <td class="fields_machineData">1</td>&nbsp; &nbsp; <td><input class="form-control" type="text" maxlength="30" id="txtMachineIDs" name="machineIDs_detail[]" placeholder="Machine ID" /></td>&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; <select id="select1" name="complaint[]" multiple class="form-control select2">&nbsp; &nbsp; &nbsp; &nbsp; <option value="12345">This is Compaint 1</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="1234567890">This is complaint 2</option>&nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; </td>&nbsp; &nbsp; <td><button type="button" class="btn btn-success add_MoreMachine__button"><i class="fa fa-plus"></i></button></td>&nbsp; </tr></table>