如何在Bootstrap-select中的另一個多值下拉列表中添加所選項目

Question

我在使用Bootstrap-select動態選擇另一個多重下拉列表中的選項時遇到麻煩。 我想將在“框一”中選擇的項目附加到在“框二”中已經選擇的項目。

通過手動添加，我可以選擇多個：

 $('select#one').on('change', function() { $('#two').selectpicker('val', ['TestA','TestB','','TestC']); $('#two').selectpicker('refresh'); }); 

並抓住已經選擇的：

 $('select#one').on('change', function() { var existingValues = $("#two").val() || []; alert(existingValues); }); 

問題是我似乎無法將所有這些加在一起。 這不起作用，但是它顯示了我正在尋找的內容：

 $('select#one').on('change', function() { var selectedOption = $(this).find(":selected").text(); var existingValues = $("#two").val() || []; var newValues = selectedOption+','+existingValues; var newValues = '\\''+newValues.replace(/,/g, '\\',\\'')+'\\''; //didnt help alert(newValues); $('#two').selectpicker('val', [newValues]); $('#two').selectpicker('refresh'); }); 

提琴奏效，但替換值而不是將其添加到選定的值： https : //jsfiddle.net/3tx8mzqn/

Answer 1

這可行。

 $("#one").on("change",function(event, clickedIndex, newValue, oldValue){ var select2values = $("#two").val(); var value = $(this).val(); if(select2values.indexOf(value)==-1) { select2values.push(value); $("#two").val(select2values); } $("#two").selectpicker('refresh'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> <select class="selectpicker" data-style="btn-danger" data-width="150px" title="box one" id="one" name="one" required> <option value="TestA">TestA</option> <option value="TestB">TestB</option> <option value="TestC">TestC</option> <option value="TestD">TestD</option> <option value="TestE">TestE</option> <option value="TestF">TestF</option> </select> <select class="selectpicker" data-style="btn-primary" data-width="fit" multiple title="box two" id="two" name="two" required> <option value="TestA">TestA</option> <option value="TestB">TestB</option> <option value="TestC">TestC</option> <option value="TestD">TestD</option> <option value="TestE">TestE</option> <option value="TestF">TestF</option> </select>