无法使用 JQuery 设置 Select2 下拉值

Question

我有两个下拉菜单，第一个是多 select 下拉菜单，第二个从第一个下拉菜单 selection 中获取值。那部分工作正常。但是我有一个问题，每当第一个下拉列表中包含一个新的 selection 时，第二个下拉列表的 selected 值就会被清除，并且默认为第一个值。我需要它来保留以前的值。

例如;在第一个下拉列表中，假设我 select 加利福尼亚、新泽西和华盛顿，第二个下拉列表具有这三个值。然后我在第二个下拉列表中选择华盛顿。到目前为止，它可以按需工作。但是，如果我从第一个下拉列表中添加说佛罗里达，我的代码确保将佛罗里达添加到第二个下拉列表中，但较早的 select 华盛顿离子被清除，而是返回加利福尼亚。在添加新元素后，我希望它留在华盛顿。我在这里的代码中做错了什么？

$(document).ready(function() {
    $('#allstates').select2();
    $('#mainstate').select2();
});


$(document).on('select2:select', '#allstates', function (event) {
    var values = [];
    var displayText = [];
    // copy all option values from selected
    $(event.currentTarget).find("option:selected").each(function (i, selected) {
        displayText[i] = $(selected).text();
        values[i] = $(selected).val();
    });

    if (values.length > 0) {             

        var mainstate = $('#' + 'mainstate');
        var currentvalue = mainstate.val();
        mainstate.empty();
        
        for (var i = 0; i < values.length; i++) {
            mainstate.append($('<option>', { value: values[i], text: displayText[i] }, '<option/>'));
        }

        mainstate.select2();
        
        if (currentvalue != null && currentvalue != "" && currentvalue != undefined) {
            if (_.contains(values, currentvalue.toUpperCase())) {
                mainstate.select2("data", { id: currentvalue, text: displayText[currentvalue] });
            }
        }        
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.js"></script>

<select class="js-example-basic-single" id="allstates" name="state" multiple>
  <option value="AL">Alabama</option>
  <option value="CA">California</option>
  <option value="FL">Florida</option>  
  <option value="NJ">New Jersey</option>
  <option value="TX">Texas</option>
  <option value="WA">Washington</option>
  <option value="WY">Wyoming</option>
</select>

<select class="main-state" id="mainstate"  name="mainstate">
</select>

Answer 1

对于Select V4，您需要像这样手动触发它

$('#mainstate').val(currentvalue).trigger('change');

    $(document).ready(function() {
        $('#allstates').select2();
        $('#mainstate').select2();
    });


    $(document).on('select2:select', '#allstates', function (event) {
        var values = [];
        var displayText = [];
        // copy all option values from selected
        $(event.currentTarget).find("option:selected").each(function (i, selected) {
            displayText[i] = $(selected).text();
            values[i] = $(selected).val();
        });

        if (values.length > 0) {             

            var mainstate = $('#' + 'mainstate');
            var currentvalue = mainstate.val();
            mainstate.empty();
            
            for (var i = 0; i < values.length; i++) {
                mainstate.append($('<option>', { value: values[i], text: displayText[i] }, '<option/>'));
            }

            mainstate.select2();
            
            if (currentvalue != null && currentvalue != "" && currentvalue != undefined) {
                if (_.contains(values, currentvalue.toUpperCase())) {
                    $('#mainstate').val(currentvalue).trigger('change');
                }
            }        
        }
    });

    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.js"></script>

    <select class="js-example-basic-single" id="allstates" name="state" multiple>
      <option value="AL">Alabama</option>
      <option value="CA">California</option>
      <option value="FL">Florida</option>  
      <option value="NJ">New Jersey</option>
      <option value="TX">Texas</option>
      <option value="WA">Washington</option>
      <option value="WY">Wyoming</option>
    </select>

    <select class="main-state" id="mainstate"  name="mainstate">
    </select>

无法使用 JQuery 设置 Select2 下拉值

Unable to set Select2 dropdown value using JQuery

javascript

jquery

jquery-select2