Come posso modificare il valore selezionato del menu a discesa select2 con JqGrid?

Sto usando la demo select2 di Oleg , ma mi chiedo se sarebbe possibile cambiare il valore attualmente selezionato nel menu a discesa.

Ad esempio, se i quattro valori caricati fossero: "Any", "Fruit", "Vegetable", "Meat"e l'elenco a discesa predefinito "Any", come potrei modificarlo "Fruit"in nell'evento JqGrid loadComplete?

È possibile?

Per la versione select2> = 4.0.0

Le altre soluzioni potrebbero non funzionare, tuttavia i seguenti esempi dovrebbero funzionare.

Soluzione 1: provoca l'attivazione di tutti gli eventi di modifica associati, incluso select2

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

Soluzione 2: provoca l'attivazione dell'evento di modifica SOLO selezione2

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

Vedi questo jsfiddle per esempi di questi. Grazie a @minlare per la soluzione 2.

Spiegazione:

Di 'che ho un migliore amico che seleziona i nomi delle persone. Quindi Bob, Bill e John (in questo esempio suppongo che il valore sia lo stesso del nome). Per prima cosa inizializzo select2 sulla mia selezione:

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

Ora seleziono manualmente Bob nel browser. Successivamente Bob fa qualcosa di cattivo e non mi piace più. Quindi il sistema deseleziona Bob per me:

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

Oppure dire che faccio selezionare al sistema il successivo nell'elenco anziché Bob:

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

Note sul sito Web Select 2 (consultare Metodi obsoleti e rimossi ) che potrebbero essere utili per gli altri:

.select2 ( 'val') Il metodo "val" è stato deprecato e verrà rimosso in Select2 4.1. Il metodo obsoleto non include più il parametro triggerChange.

Dovresti invece chiamare direttamente .val sull'elemento sottostante. Se hai bisogno del secondo parametro (triggerChange), dovresti anche chiamare .trigger ("change") sull'elemento.

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

Guardando il documenti select2 si usa il seguito per ottenere / impostare il valore.

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

@PanPipes ha sottolineato che questo è cambiato per 4.x (vai a lanciare un voto sotto). valviene ora chiamato direttamente

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

Quindi all'interno loadCompletedi jqGrid puoi ottenere qualunque valore tu stia cercando quindi impostare il valore di selectbox.

Avviso dai documenti

Si noti che per utilizzare questo metodo è necessario definire la funzione initSelection nelle opzioni in modo che Select2 sappia come trasformare l'id dell'oggetto che si passa in val () all'intero oggetto che deve rendere la selezione. Se si esegue il collegamento a un elemento selezionato, questa funzione è già disponibile.

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

questo dovrebbe essere di aiuto.

Questo dovrebbe essere ancora più semplice.

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

Ma assicurati che i valori che passi siano già presenti in HTMl

Se vuoi aggiungere nuovo value='newValue'e text='newLabel', dovresti aggiungere questo codice:

1. Aggiungi nuova opzione a <select>:

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

2. Attiva la <select>modifica al valore selezionato:

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

Volevo solo aggiungere una seconda risposta. Se hai già eseguito il rendering della selezione come select2 , dovrai rifletterla nel selettore nel modo seguente:

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

Hai due opzioni: come afferma la risposta di @PanPipes, puoi fare quanto segue.

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

Questa è una soluzione accettabile solo se non si hanno azioni personalizzate associate all'evento di modifica. La soluzione che utilizzo in questa situazione è quella di attivare un evento specifico select2 che aggiorna la selezione visualizzata select2.

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

Problemi con l'impostazione di un'opzione String selezionata in un select2:

Con l'opzione: "opzione stringa1 / opzione" utilizzata:

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

MA con un'opzione con un valore: valore dell'opzione "E" stringa1 / opzione:

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

Spera che questo aiuti qualcuno alle prese con lo stesso problema.

se si desidera selezionare un singolo valore, utilizzare $('#select').val(1).change()

se si desidera selezionare più valori, impostare il valore nell'array in modo da poter utilizzare questo codice $('#select').val([1,2,3]).change()

Per V4 Select2 se si desidera modificare sia il valore di select2 sia la rappresentazione testuale del menu a discesa.

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

Questo imposterà non solo il valore dietro le quinte ma anche la visualizzazione del testo per select2.

Estratto da https://select2.github.io/announcements-4.0.html#removed-methods

Il mio codice previsto:

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

funziona perfettamente grazie a @PanPipes per l'utile.

Fai questo

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

se si dispone di una fonte di dati Ajax, si prega di fare riferimento a questo per bug gratuitamente

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

// Imposta il controllo Select2

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

// Recupera l'elemento preselezionato e aggiungilo al controllo

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

se si desidera impostare un elemento selezionato quando si conosce il testo dall'elenco a discesa e non si conosce il valore, ecco un esempio:

Supponiamo che tu abbia capito un fuso orario e desideri impostarlo, ma i valori hanno time_zone_idin essi.

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

Carattere: selezionare 2 documentazione

puoi semplicemente usare il metodo get / set per impostare il valore

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

oppure puoi farlo:

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