Почему select2 не устанавливает все элементы массива? - PullRequest
Новая
       2

Почему select2 не устанавливает все элементы массива?

0 голосов
/ 14 ноября 2018

Здесь у меня есть пользовательский код, в котором я тестирую массив set для значения select2Но когда я устанавливаю элементы массива в select2, все элементы не установлены.Как можно решить эту проблему? 

$('#tags').select2({
  multiple:true,
  tags: true,
  placeholder: 'Select tag...'
});

var tags = ["design", "template"];

$('#setTags').click(
  function(e) {
    $('#tags').select2('val', tags);
  }
);
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js
"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select name="tags[]" id="tags" multiple="multiple">
  <option value="design">Design</option>
  <option value="portfolio">Portfolio</option>
  <option value="template">Template</option>
</select>

<button id="setTags">Set tags</button>

1 Ответ

0 голосов
/ 14 ноября 2018

Вам необходимо заменить $('#tags').select2('val', tags); на $('#tags').val(tags);, а затем вызвать событие изменения, подобное этому. 

$('#tags').select2({
  multiple:true,
  tags: true,
  placeholder: 'Select tag...'
});

var tags = ["design", "template"];

$('#setTags').click(
  function(e) {
    $('#tags').val(tags);
    $('#tags').trigger('change');
  }
);
#tags {
   width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js
"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select name="tags[]" id="tags" multiple="multiple">
  <option value="design">Design</option>
  <option value="portfolio">Portfolio</option>
  <option value="template">Template</option>
</select>

<button id="setTags">Set tags</button>

Ссылка

...