javascript - 如何在 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');
});

Fiddle 可以工作，但替换值而不是将其添加到选定的值中: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>