Невозможно установить раскрывающееся значение Select2 с помощью JQuery - PullRequest
Новая
       42

Невозможно установить раскрывающееся значение Select2 с помощью JQuery

0 голосов
/ 07 ноября 2019

У меня есть два раскрывающихся списка, первый - это раскрывающийся список с множественным выбором, а второй - значения из первого раскрывающегося списка. Эта часть работает нормально. Однако у меня есть проблема, каждый раз, когда новый выбор включается в первый выпадающий список, выбранное значение второго выпадающего списка стирается и по умолчанию устанавливается первое значение. Мне нужно, чтобы сохранить предыдущее значение.

Например;В первом раскрывающемся списке, скажем, я выбираю Калифорнию, Нью-Джерси и Вашингтон, во втором раскрывающемся списке есть эти три значения. Затем я выбираю Вашингтон во втором раскрывающемся списке. Пока это работает как нужно. Однако, если я добавлю, например, «Флорида» из первого выпадающего списка, мой код гарантирует, что «Флорида» добавляется ко второму выпадающему списку, но более ранний выбор Вашингтона уничтожается и вместо этого он возвращается в Калифорнию. Я бы хотел, чтобы он остался с Вашингтоном после добавления нового элемента. Что я делаю не так в моем коде здесь? 

$(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>

1 Ответ

2 голосов
/ 07 ноября 2019

Для 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>
...