select2 - как предварительно выбрать несколько опций, которые получают данные из удаленного источника AJAX - PullRequest
Новая
       11

select2 - как предварительно выбрать несколько опций, которые получают данные из удаленного источника AJAX

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

У меня есть модал, который имеет два «поведения», одно для создания новой записи и другое для редактирования существующей записи, в зависимости от того, какая кнопка нажата (новая / редактировать).

Когда вы нажимаете «Изменить», данные записи (таблица пользователей) загружаются «вместе» с дочерними записями (таблица разрешений).

Во время модальной загрузки инициализируется select2: 

let $select2user    = $(".select2user");

$select2user.select2({
    ajax: {
        url: 'getUsersWithPermissions.php',
        type: "GET",
        dataType: 'json',
        data: function (params) {
            return {
                search: params.term,
                page: params.page || 1
            };
        },
        processResults: function (data) {
            data.page = data.page || 1;
            return {
                results: data.items.map(function (item) {
                    return {
                        id: item.id,
                        text: item.name
                    };
                })
            }
        },
        cache: true,
        delay: 250
    },
    multiple: true
});

Все работает нормально, кроме тех случаев, когда я нажимаю "Редактировать запись".

Форма ввода (модальная) правильно заполнена регистрационными данными, однако я не могу предварительно выбрать несколько опций из дочерних записей (таблица разрешений).

Я пытался использовать 'append', но в итоге получалось дублировать опции. 

$.each( value, function( permissions, permission ) {
  console.log(permission['name']); // ok
  let newOption = new Option(permission['name'], permission['id'], false, true);
  $select2user.append(newOption);
});
$select2user.trigger('change');

1 Ответ

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

$(document).ready(function() { 
  $("#selectlist").select2();
  
  var _selectedValues = [];
  _selectedValues.push('1');
  _selectedValues.push('5');
  _selectedValues.push('8');
  $("#selectlist").select2().val(_selectedValues).trigger("change");
  
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<select id="selectlist" class="form-control" name="selectList[]" multiple="multiple" style="width:200px">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">Eight</option>
  <option value="9">Nine</option>
  <option value="10">Ten</option>
</select>

Вы можете попробовать вот так, чтобы установить значения в select2. 

var _selectedValues = [];
_selectedValues.push('1');
_selectedValues.push('2');
_selectedValues.push('3');
$("#selectlist").select2().val(_selectedValues).trigger("change");
...