jquery select2 - Select2 no muestra el valor seleccionado

select2 placeholder

Question

Select2 carga todos los elementos de mi lista con éxito, el problema que encontré cuando trato de seleccionar un valor específico cuando carga la página. Ejemplo:

:: poner select2 en un elemento html específico, no se selecciona ningún valor, incluso se cargan todos los elementos.

$(''#my_id'').select2();

:: Cuando la página está cargada, intento mostrar un elemento específico seleccionado, pero no funciona como se esperaba, porque incluso seleccionado, el select2 no lo muestra.

$(''#my_id'').val(''3''); //select the right option, but doesn''t render it on page loads.

¿Cómo hacer que una opción seleccionada aparezca cuando se cargan las páginas?

Gracias por adelantado.

ACTUALIZADO

:: Cómo cargo todos los elementos select2 (lo siento, es jade, HTML no puro):

label(for=''category'') Category
    span.required *
select(id=''category'', style=''width:230px'', name=''category'')
    option(value='''') - Select -
    each cat in categories
        option(value=''#{cat.id}'') #{cat.description}

PD: todos los artículos de mi lista están cargados.

:: Cómo inicializo el select2:

Simplemente ponga el siguiente código de línea en mi javascript y lo haga con éxito:

$(''#category'').select2();

:: Cómo trato de seleccionar un valor específico:

• Primer intento:

  $(''#category'').select2(
      {
          initSelection: function(element, callback) {
              callback($(''#field-category'').val());
          }
      }
  );

• Segundo intento:

  $(''#category'').val($(''#field-category'').val());

PD: #field-category tiene un valor es un campo de entrada oculto y funciona bien.

¡Gracias chicos!

Answer 1

Aquí es cómo hacer val en select2 simplemente seleccione el elemento correspondiente. Por algún motivo, select2 no proporciona la función para buscar selecciones por id.

en eso:

$("#thing").select2({data:sources, initSelection: function(item, callback) {
  // despite select2 having already read the whole sources list when you 
  // do .val(n) you have to explicitly tell it how to find that item again.
  var to_be_selected = null;
  $.each(sources, function(index, thing) {
    if (thing.id == item.val()) {
      to_be_selected = thing;
      return;
    }
  })
  callback(to_be_selected);
}})

código normal

// to load the thing with id==3 from the initial sources list.
$("#thing").select2({''val'': 3})

Answer 2

Me encuentro con el mismo problema, esto funciona para mí:

Using Select2 4.0.0
$("#slect_id").val(''3'').trigger("change")

Answer 3

Necesita usar la opción initSelection para establecer el valor inicial.

Si está utilizando un elemento de select predefinido para crear select2, puede usar el siguiente método

$(''select'').select2().select2(''val'',''3'')

Demostración: Fiddle

Answer 4

Para mí estaba enviando seleccionado en el conjunto de datos aún la opción predeterminada no estaba siendo seleccionada. Tuve que hacer algo como a continuación para que funcione -

$(".select").select2({
    data: data_names
});
data_names.forEach(function(name) {
    if (name.selected) {
        $(".select").select2(''val'', name.id);
    }
});

Answer 5

Por here initSelection está en desuso en Select2 4.0 y posterior.

Usando Select2 4.0.0 esto funcionó para mí:

$(''#my_id'').select2({val:3});

HT: @Kokizzu

Answer 6

Una forma muy simple de abordar este problema es:

// Paso 1: Aquí suponiendo que la identificación de su selectbox es my_id, entonces esto agregará el atributo seleccionado a 1st opción $ (''# my_id option''). Eq (0) .prop (''selected'', true);

// Paso 2: Ahora reinicia tu cuadro de selección

// Esto funcionará, si no has inicializado selectbox $ (''# my_id''), select2 ();

o

// Esto funcionará, si has inicializado la casilla de selección antes, entonces primero destrúyela e inicialízalo $ (''# my_id''). Select2 (''destroy''). Select2 ();

Answer 7

agregue un cambio de gatillo después de configurar val:

$(''#my_id'').val(''3'').trigger(''change'');