jquery - data - ¿Cómo cambio el valor seleccionado de la lista desplegable select2 con JqGrid?

select2 tags

Question

Estoy usando la demo de Select2 de Oleg, pero me pregunto si sería posible cambiar el valor seleccionado actualmente en el menú desplegable.

Por ejemplo, si los cuatro valores cargados fueron: "Any", "Fruit", "Vegetable", "Meat" y la lista desplegable predeterminada en "Any" , ¿cómo podría cambiar eso a "Fruit" en el JqGrid? evento loadComplete ?

es posible?

Answer 1

En cuanto a los documentos de Select2 , utiliza el siguiente para obtener / establecer el valor.

$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value

@PanPipes ha señalado que esto ha cambiado para 4.x (ve a echarle un voto a continuación). val ahora se llama directamente

$("#select").val("CA");

Entonces dentro de loadComplete de jqGrid puede obtener cualquier valor que esté buscando y luego establecer el valor de la casilla de selección.

Aviso de los documentos

Tenga en cuenta que para usar este método debe definir la función initSelection en las opciones, de modo que Select2 sepa cómo transformar la identificación del objeto que pasa en val () al objeto completo que necesita para representar la selección. Si se está conectando a un elemento seleccionado, esta función ya está provista para usted.

Answer 2

Esto debería ser aún más fácil.

$("#e1").select2("val", ["View" ,"Modify"]);

Pero asegúrese de que los valores que pase ya estén presentes en el HTMl

Answer 3

Mi código esperado:

$(''#my-select'').val('''').change();

trabajando perfectamente gracias a @PanPipes por el útil.

Answer 4

Para V4 Select2, si desea cambiar tanto el valor de select2 como la representación de texto del menú desplegable.

var intValueOfFruit = 1;
var selectOption = new Option("Fruit", intValueOfFruit, true, true);
$(''#select'').append(selectOption).trigger(''change'');

Esto establecerá no solo el valor detrás de las escenas, sino también la visualización de texto para select2.

Extraído de https://select2.github.io/announcements-4.0.html#removed-methods

Answer 5

Si desea agregar un nuevo value=''newValue'' y text=''newLabel'' , debe agregar este código:

1. Agregue una nueva opción a <select> :

   var opt = "<option value=''newValue'' selected =''selected''>" + newLabel+ " </option>";
   $(selLocationID).html(opt);

2. Desencadenar <select> cambiar al valor seleccionado:

   $(selLocationID).val(''newValue'').trigger("change");

Answer 6

Solo quería agregar una segunda respuesta. Si ya ha procesado la selección como select2 , deberá tener eso reflejado en su selector de la siguiente manera:

$("#s2id_originalSelectId").select2("val", "value to select");

Answer 7

Tener algunos problemas para configurar una opción de cadena seleccionada en un select2:

Con la opción: "opción cadena1 / opción" utilizada:

$(''#select'').val("string1").change(); 

PERO con una opción con un valor: valor de opción "E" string1 / option:

$(''#select'').val("E").change(); // you must enter the Value instead of the string

Espera que esto ayude a alguien a luchar con el mismo problema.

Answer 8

Usted tiene dos opciones: como @PanPipes answer declara que puede hacer lo siguiente.

$(element).val(val).trigger(''change'');

Esta es una solución aceptable solo si no tiene acciones personalizadas vinculadas al evento de cambio. La solución que uso en esta situación es activar un evento específico de select2 que actualiza la selección de selección2 que se muestra.

$(element).val(val).trigger(''change.select2'');

Answer 9

hacer esto

 $(''select#id'').val(selectYear).select2();

Answer 10

si desea seleccionar un solo valor, entonces use $(''#select'').val(1).change()

si desea seleccionar varios valores, entonces establezca el valor en la matriz para que pueda usar este código $(''#select'').val([1,2,3]).change()

Answer 11

si tiene una fuente de datos ajax, refiérase a esto para encontrar errores gratis

https://select2.org/programmatic-control/add-select-clear-items

// Configurar el control Select2

$(''#mySelect2'').select2({
    ajax: {
        url: ''/api/students''
    }
});

// Obtener el elemento preseleccionado y agregarlo al 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
        }
    });
});

Answer 12

Para la versión select2> = 4.0.0

Las otras soluciones podrían no funcionar, sin embargo, los siguientes ejemplos deberían funcionar.

Solución 1: hace que se desencadenen todos los eventos de cambio adjuntos, incluido select2

$(''select'').val(''1'').trigger(''change'');

Solución 2: hace que solo seleccione2 cambie evento para desencadenar

$(''select'').val(''1'').trigger(''change.select2'');

Vea este jsfiddle para ejemplos de estos. Gracias a @minlare por la Solución 2.

Explicación:

Supongamos que selecciono a un mejor amigo con los nombres de las personas. Entonces Bob, Bill y John (en este ejemplo, supongo que el valor es el mismo que el nombre). Primero inicializo select2 en mi selección:

$(''#my-best-friend'').select2();

Ahora selecciono Bob manualmente en el navegador. Luego, Bob hace algo malo y ya no me gusta. Entonces el sistema desempaqueta a Bob para mí:

$(''#my-select'').val('''').trigger(''change'');

O digamos que hago que el sistema seleccione el siguiente en la lista en lugar de Bob:

// I have assume you can write code to select the next guy in the list
$(''#my-best-friend'').val(''Bill'').trigger(''change'');  

Notas sobre el sitio web de Select 2 (ver métodos obsoletos y eliminados ) que pueden ser útiles para otros:

.select2 (''val'') El método "val" ha quedado en desuso y se eliminará en Select2 4.1. El método en desuso ya no incluye el parámetro triggerChange.

Debería llamar directamente .val al elemento subyacente. Si necesita el segundo parámetro (triggerChange), también debe llamar a .trigger ("change") en el elemento.

$(''select'').val(''1'').trigger(''change''); // instead of $(''select'').select2(''val'', ''1'');

Answer 13

// 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
        }
    });
});

Fuente: Seleccione 2 documentación

Answer 14

this.$("#yourSelector").select2("data", { id: 1, text: "Some Text" });

esto debería ser de ayuda.