Значения Select2 показаны, но на самом деле пустые - PullRequest
Новая
       3

Значения Select2 показаны, но на самом деле пустые

2 голосов
/ 07 марта 2020 

<div class="form-group">
  <select class="form-control js-example-basic-multiple"
    name="regular[]" id="regular" multiple="multiple" required>
    <option value="History">History</option>
    <option value="Political Science">Political Science
    </option>
    <option value="Economics">Economics</option>
    <option value="Education">Education</option>
    <option value="Philosophy">Philosophy</option>
    <option value="Elective Assamese">Elective Assamese
    </option>
    <option value="Elective Hindi">Elective Hindi</option>
    <option value="Arabic">Arabic</option>
    <option value="Mathematics">Mathematics</option>
    <option value="Linguistics">Linguistics</option>
  </select>
</div>

Это мой вход select2. 

$(document).ready(function () {
    $('#regular').select2({
        placeholder: 'Select any two from the options',
        maximumSelectionLength: 2,
    });
});

Я загрузил select2. js здесь. и я получаю данные из ajax вызова.

options = data.regular.split(",");

это option имеет 3 значения, я хочу выбрать первые два из массива. Следовательно, мой код: 

option = [options[0],options[1]];
$("#regular").val(option).trigger('change');

Теперь параметры отображаются в списке. Но если я нажимаю и выбираю на входе, все сбрасывается, и мне приходится выбирать снова. И если не изменяя ничего, что я хочу отправить, в поле отображается обязательное.

1 Ответ

1 голос
/ 07 марта 2020

здесь код работает, потому что значения с сервера идентичны двум значениям элементов Option

Так что, возможно, ваша проблема в том, что строка опции еще не существует

, также он чувствителен к регистру, поэтому "arabi c"! == "Arabi c" arabi c не будет работать

, либо изменить тег опции, либо изменить строку значения с JSON response

Надеюсь, это поможет ? 

$(document).ready(function() {

  mySelect = $('#regular').select2({
    placeholder: 'Select any two from the options',
    maximumSelectionLength: 2
  });

  options = 'Economics,Arabic,Education'.split(',');
  option = [options[0],options[1]];

  //simulate ajax using timeout
  setTimeout(function() {
    mySelect.val(option).trigger("change");
  }, 1000);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<div class="form-group">
  <select class="form-control js-example-basic-multiple" name="regular[]" id="regular" multiple="multiple" required>
    <option value="History">History</option>
    <option value="Political Science">Political Science
    </option>
    <option value="Economics">Economics</option>
    <option value="Education">Education</option>
    <option value="Philosophy">Philosophy</option>
    <option value="Elective Assamese">Elective Assamese
    </option>
    <option value="Elective Hindi">Elective Hindi</option>
    <option value="Arabic">Arabic</option>
    <option value="Mathematics">Mathematics</option>
    <option value="Linguistics">Linguistics</option>
  </select>
</div>
...