javascript - update - Establecer programáticamente el valor de un ajax Select2

select2 set value programmatically

Question

Tengo una entrada de autocompletado Select2 (construida a través de SonataAdmin), pero no puedo, por mi vida, averiguar cómo configurarlo en un par clave / valor conocido.

Hay un JS Fiddle aquí que muestra aproximadamente lo que tengo. Lo que quiero saber es qué función puedo adjuntar al botón para que

• el campo Select2 muestra el texto "NUEVO VALOR" para el usuario, y
• el campo Select2 enviará un valor de "1" cuando el formulario se envíe al servidor

He intentado todo tipo de combinaciones de data jQuery y Select2 y métodos val , comparados con varias entradas en la página, pero nada parece funcionar ... ¿hay alguna manera de hacerlo?

- Editar -

La respuesta aceptada a continuación es muy útil, ayuda a arrojar algo de luz sobre la manera correcta de inicializar la selección y explica para qué es initSelection.

Habiendo dicho eso, parece que mi mayor error aquí fue la forma en que intentaba desencadenar el cambio.

Estaba usando

$(element).select2(''data'', newObject).trigger(''change'');

Pero esto resulta en un objeto de add vacío dentro del evento de cambio de select2.

Si, en cambio, usas:

$(element).select2(''data'', newObject, true);

entonces el código funciona como debería, con el nuevo newObject disponible en el evento de cambio de select2 y los valores se configuran correctamente.

Espero que esta información extra ayude a alguien más!

Answer 1

Con Select2 versión 4+, en realidad no hay nada especial que deba hacer. El jQuery estándar con un desencadenante de evento ''cambio'' funcionará al final.

var $select = $("#field");
var items = {id: 1, text: "Name"}; // From AJAX etc
var data = $select.val() || [];    // If you want to merge with existing

$(items).each(function () {
  if(!$select.find("option[value=''" + this.id + "'']").length) {
    $select.append(new Option(this.text, this.id, true, true));
  }
  data.push(this.id);
});

$select.val(data).trigger(''change''); // Standard event notifies select2

Hay un ejemplo básico en la documentación de Select2: https://select2.org/programmatic-control/add-select-clear-items

Answer 2

Cuando use select2 con opción múltiple, use esta construcción:

$(element).select2("data", $(element).select2("data").concat(newObject), true);

jquery select2 set multiple concatenation

Answer 3

Para establecer los valores iniciales, debe agregar la etiqueta de opciones necesaria al elemento seleccionado con jQuery, luego defina estas opciones como seleccionadas con el método val de select2 y finalmente active el evento ''cambiar'' de select2.

1.-$(''#selectElement'').append(''<option value=someID>optionText</option>'');
2.-$(''#selectElement'').select2(''val'', someID, true);

El tercer argumento booleano le dice a select2 que active el evento de cambio.

Para obtener más información, consulte https://github.com/select2/select2/issues/3057

Answer 4

Si elimina el .trigger(''change'') de su violín, registra el Object {id: 1, label: "NEW VALUE"} (debe hacer doble clic ya que el registro está antes del cambio de valor). ¿Es eso lo que estás buscando?

Answer 5

Ten cuidado, hay un error en el comentario "validado".

autocompleteInput.select2(''data'', {id:103, label:''ENABLED_FROM_JS''});

La forma correcta es

autocompleteInput.select2(''data'', {id:103, text:''ENABLED_FROM_JS''});

Usa text lugar de label

Answer 6

Tenga en cuenta que esto fue probado con la versión 4+

Finalmente pude progresar después de encontrar esta discusión: https://groups.google.com/forum/#!topic/select2/TOh3T0yqYr4

El último comentario señala un método que pude usar con éxito.

Ejemplo:

$("#selectelement").select2("trigger", "select", {
    data: { id: "5" }
});

Esto parece ser suficiente información para que coincida con los datos de ajax y establezca el valor correctamente. Esto ayudó enormemente con los adaptadores de datos personalizados.

Answer 7

Todo lo que tienes que hacer es establecer el valor y luego ejecutar: $ (''#myselect'').select2 (); o $ (''select'').select2 (); . Y todo se actualiza muy bien.

Answer 8

de sus ejemplos https://select2.github.io/examples.html

Acceso programático:

var $example = $(".js-example-programmatic").select2();
var $exampleMulti = $(".js-example-programmatic-multi").select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
$(".js-programmatic-open").on("click", function () { $example.select2("open"); });
$(".js-programmatic-close").on("click", function () { $example.select2("close"); });
$(".js-programmatic-init").on("click", function () { $example.select2(); });
$(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });
$(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });

Answer 9

eso es todo:

$("#tag").select2(''data'', { id:8, title: "Hello!"});

Answer 10

Nota: La pregunta y esta respuesta son para Select2 v3. Select2 v4 tiene una API muy diferente a la v3.

Creo que el problema es la función initSelection . ¿Está utilizando esa función para establecer el valor inicial? Sé que la documentación de Select2 hace que parezca que es su propósito, pero también dice "Esencialmente, esta es una función id -> mapeo de objetos", y no es así como lo ha implementado.

Por alguna razón, la llamada a .trigger(''change'') hace que se initSelection función initSelection , que cambia el valor seleccionado de nuevo a "ENABLED_FROM_JS".

Intente deshacerse de la función initSelection y, en su lugar, establezca el valor inicial utilizando:

autocompleteInput.select2(''data'', {id:103, label:''ENABLED_FROM_JS''});

jsfiddle

Nota: El OP ha suministrado las opciones formatResult y formatSelection . Según se suministran, esas funciones de devolución de llamada esperan que los elementos tengan una propiedad de "etiqueta", en lugar de una propiedad de "texto". Para la mayoría de los usuarios, debería ser:

autocompleteInput.select2(''data'', {id:103, text:''ENABLED_FROM_JS''});

Más información sobre la función initSelection :

Si busca en la documentación de Select2 "initSelection", verá que se usa cuando el elemento tiene un valor inicial y cuando se llama a la función .val() del elemento. Esto se debe a que esos valores solo constan de una id y Select2 necesita el objeto de datos completo (en parte para que pueda mostrar la etiqueta correcta).

Si el control Select2 mostraba una lista estática, la función initSelection sería fácil de escribir (y parece que Select2 podría suministrárselo). En ese caso, la función initSelection solo tendría que buscar el id en la lista de datos y devolver el objeto de datos correspondiente. (Digo "devolver" aquí, pero en realidad no devuelve el objeto de datos; lo pasa a una función de devolución de llamada).

En su caso, probablemente no necesite suministrar la función initSelection ya que su elemento no tiene un valor inicial (en el html) y no va a llamar a su método .val() . Simplemente siga utilizando el .select2(''data'', ...) para establecer los valores mediante programación.

Si initSelection que proporcionar una función initSelection para un autocompletado (que usa ajax), probablemente necesitaría hacer una llamada ajax para construir el objeto de datos.

Answer 11

PARA LA VERSIÓN 3.5.3

    $(".select2").select2(''data'',{id:taskid,text:taskname}).trigger(''change'');

Basado en la respuesta de John S Sin embargo, solo lo anterior funcionará solo si al inicializar select2 la opción initSelection no está inicializada.

$(".select2").select2({
      //some setup
})