¿Cómo puedo establecer el valor inicial de Select2 cuando uso AJAX?

Solución:

Está haciendo la mayoría de las cosas correctamente, parece que el único problema que está golpeando es que no está activando el change método después de establecer el nuevo valor. Sin un change evento, Select2 no puede saber que el valor subyacente ha cambiado, por lo que solo mostrará el marcador de posición. Cambiando tu última parte a

.val(initial_creditor_id).trigger('change');

Debería solucionar su problema y debería ver la actualización de la interfaz de usuario de inmediato.

---

Esto es asumiendo que tienes un <option> ya eso tiene un value de initial_creditor_id. Si no selecciona2, y el navegador, no podrá cambiar el valor, ya que no hay ninguna opción a la que cambiar y Select2 no detectará el nuevo valor. Noté que tu <select> solo contiene una única opción, la del marcador de posición, lo que significa que deberá crear la nueva <option> a mano.

var $option = $("<option selected></option>").val(initial_creditor_id).text("Whatever Select2 should display");

Y luego añádalo al <select> que inicializó Select2. Es posible que deba obtener el texto de una fuente externa, que es donde initSelection solía entrar en juego, lo que todavía es posible con Select2 4.0.0. Como una selección estándar, esto significa que tendrá que realizar la solicitud AJAX para recuperar el valor y luego establecer el <option> texto sobre la marcha para ajustar.

var $select = $('.creditor_select2');

$select.select2(/* ... */); // initialize Select2 and any events

var $option = $('<option selected>Loading...</option>').val(initial_creditor_id);

$select.append($option).trigger('change'); // append the option and update Select2

$.ajax({ // make the request for the selected data object
  type: 'GET',
  url: '/api/for/single/creditor/' + initial_creditor_id,
  dataType: 'json'
}).then(function (data) {
  // Here we should have the data object
  $option.text(data.text).val(data.id); // update the text that is displayed (and maybe even the value)
  $option.removeData(); // remove any caching data that might be associated
  $select.trigger('change'); // notify JavaScript components of possible changes
});

Si bien esto puede parecer mucho código, esto es exactamente como lo harías para cuadros de selección que no sean Select2 para garantizar que se hayan realizado todos los cambios.

Lo que he hecho es más limpio y necesito hacer dos matrices:

• uno contiene una lista de Object con id y un texto (en mi caso, su id y nombre, dependiendo de su templateResult) (es lo que obtiene de la consulta ajax)
• el segundo es solo una matriz de identificadores (valor de selección)

Inicializo select2 usando la primera matriz como datos y la segunda como val.

Una función de ejemplo con como parámetros un dict de id: name.

function initMyList(values) {
    var selected = [];
    var initials = [];

    for (var s in values) {
        initials.push({id: s, name: values[s].name});
        selected.push(s);
    }

    $('#myselect2').select2({
        data: initials,
        ajax: {
            url: "/path/to/value/",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    term: params.term,
                    page: params.page || 1,
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;

                return {
                    results: data.items,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: true
        },
        minimumInputLength: 1,
        tokenSeparators: [",", " "],
        placeholder: "Select none, one or many values",
        templateResult: function (item) { return item.name; },
        templateSelection: function (item) { return item.name; },
        matcher: function(term, text) { return text.name.toUpperCase().indexOf(term.toUpperCase()) != -1; },
    });

    $('#myselect2').val(selected).trigger('change');
}

Puede alimentar el valor de las iniciales usando llamadas ajax y usar jquery promises para hacer la inicialización select2.

Me funciona …

No use jQuery, solo HTML: cree el valor de la opción se mostrará como seleccionado. Si la identificación está en seleccionar2 datos se seleccionará automáticamente.

<select id="select2" name="mySelect2">
  <option value="mySelectedValue">
        Hello, I'm here!
  </option>
</select>

Select2.org – Valores predeterminados preseleccionados

---

---

Utiliza Nuestro Buscador