追加后引導多選在表中不起作用

Question

我面臨一個問題，即在表 >> td 中附加新的多選框后，我無法制作引導多選框。

我閱讀了 StackOverflow 和其他社區上的多個線程，但我無法得到肯定的答案。 單擊PLUS BTN new 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 ，然后每當您在 table 中附加新的 trs 時rebuild您的多選。

演示代碼：

 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>