Как установить выбранные значения на несколько select2?

Question

У меня есть несколько входов select2. Я заполняю все необходимые опции в него. После этого я отправляю ему выбранные значения, но эти выбранные значения не отмечены в пользовательском интерфейсе.

Я пробовал нижеприведенные блоки кода, но ни один из них не работает.

let array = [];

  data.jobDepartments.map(x => {
    array.push(x.id);
  });

  $("#jobDepartment").val(array).trigger("change");

let array = [];

  data.jobDepartments.map(x => {
    array.push(x.id);
  });

  $("#jobDepartment").select2("val", array);

Здесьмои настройки для ввода select2.

<select id="jobDepartment" name="jobDepartment" class="form-control select2" multiple="multiple" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="jobDepartment"></select>

$(document).ready(function () {
  $(".select2").select2();
});

let array = [];

  data.jobDepartments.map(x => {
    array.push(x.id);
  });

  $("#jobDepartment").val(array).trigger("change");

Результат: https://prnt.sc/pn0v94

Я ожидал этого: https://prnt.sc/pn0vvb

Не могли бы выпомочь мне с этим?

Answer 1

Я решил проблему. Ошибка была в данных. Мои данные неверны.

Answer 2

Попробуйте это Fiddle

В вашем коде отсутствуют следующие вещи: у вас должна быть конфигурация данных при создании select2

$("#e9").select2({
        placeholder: "Select a State",
        allowClear: true,
    templateSelection:function(obj){
    return obj.title;
    },
        data: [{
                'id': 1,
                title: 'test'
            }, {
                'id': 2,
                title: 'test1'
            }
        ]
    });

, тогда вы должны запустить изменение