¿Cómo cambio el valor seleccionado del menú desplegable select2 con JqGrid?

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

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

es posible?

Para la versión select2> = 4.0.0

Es posible que las otras soluciones no funcionen, sin embargo, los siguientes ejemplos deberían funcionar.

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

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

Solución 2: hace que el evento de cambio SOLO select2 se active

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

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

Explicación:

Digamos que tengo un mejor amigo seleccionado 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 select:

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

Ahora selecciono manualmente Bob en el navegador. Luego Bob hace algo malo y ya no me gusta. Entonces el sistema anula la selección de Bob para mí:

$('#my-best-friend').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 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.

En su lugar, debe llamar directamente a .val en el 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');

Mirando los documentos select2 , usa los siguientes 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 darle un voto a favor a continuación). valahora se llama directamente

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

Entonces, dentro loadCompletede jqGrid, puede obtener el valor que esté buscando y luego establecer el valor del cuadro 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 para 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á adjuntando a un elemento seleccionado, esta función ya está disponible para usted.

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

Esto debería ser de ayuda.

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

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

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

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

1. Agregar nueva opción a <select>:

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

2. Activar el <select>cambio al valor seleccionado:

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

Solo quería agregar una segunda respuesta. Si ya ha procesado el select como select2 , deberá reflejarlo en su selector de la siguiente manera:

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

Tiene dos opciones: como dice @PanPipes answer, puede hacer lo siguiente.

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

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

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

Tener algunos problemas para configurar una opción de cadena seleccionada en 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 la opción "E" string1 / option:

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

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

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

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

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 escena, sino también la visualización de texto para select2.

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

Mi código esperado:

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

funcionando perfectamente gracias a @PanPipes por la útil.

hacer esto

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

si tiene una fuente de datos ajax, consulte esto para 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
        }
    });
});

Si desea establecer un elemento seleccionado cuando conoce el texto de la lista desplegable y no conoce el valor, aquí hay un ejemplo:

Supongamos que descubrió una zona horaria y desea establecerla, pero los valores tienen time_zone_iden ellos.

        var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        var $select2 = $('#time-zone');
        var selected = $select2.find("option:contains('"+timeZone+"')").val();
        $select2.val(selected).trigger('change.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
        }
    });
});

Fuente: Seleccione 2 documentación

simplemente puede usar el método get / set para establecer el valor

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

o puedes hacer esto:

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