Select2 4.0 начальное значение в режиме ajax

Question

У меня есть следующее выбрать на моей странице:

<select><option value="1" selected="selected">Caption</option></select>

Я звоню select2 (v 4.0) init:

city.select2({
    ajax: {
        url: <...>,
        data: <...>,
        processResults: <...>,
        cache: true
    },
    escapeMarkup: function(markup){ return markup; },
    minimumInputLength: 0,
    templateResult: function(repo){ return repo.name; },
    templateSelection: function(repo){ return repo.name; }
});

Проблема в том, что select2 сбрасывает выбранное по умолчанию значение и показывает пустую строку. Есть ли способ установить значение по умолчанию на select2 init?

Answer 1

Вопрос был в вашем templateSelection метод, как вы ожидаете name свойство находиться на вашем объекте данных. Помимо того, что text теперь требуется, и вам не понадобится метод, если вы повторно отобразите его, вы не обрабатываете случай, когда объект данных имеет text имущество.

city.select2({
    ajax: {
        url: <...>,
        data: <...>,
        processResults: <...>,
        cache: true
    },
    escapeMarkup: function(markup){ return markup; },
    minimumInputLength: 0,
    templateResult: function(repo){ return repo.name || repo.text; },
    templateSelection: function(repo){ return repo.name || repo.text; }
});

Это должно исправить вашу проблему и правильно отобразить начальный выбор.

Answer 2

Документы select2 теперь имеют пример того, как это сделать.

// Set up the Select2 control
$('#mySelect2').select2({
  ajax: {
    url: '/api/students'
  }
});

// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
  type: 'GET',
  url: '/api/students/s/' + studentId
}).then(function (data) {
  // create the option and append to Select2
  var option = new Option(data.full_name, data.id, true, true);
  studentSelect.append(option).trigger('change');

  // manually trigger the `select2:select` event
  studentSelect.trigger({
    type: 'select2:select',
    params: {
      data: data
    }
  });
});

В основном, настройте select2 для ajax, а затем предварительно заполните нужным объектом. Волшебство сделано в последнюю очередь, .trigger() что заставляет select2 подобрать изменение и отобразить его.