Wie ändere ich den ausgewählten Wert von select2 dropdown mit JqGrid?

Ich verwende Olegs select2-Demo , frage mich jedoch, ob es möglich ist, den aktuell ausgewählten Wert im Dropdown-Menü zu ändern.

Wenn beispielsweise die vier geladenen Werte: "Any", "Fruit", "Vegetable", "Meat"und die Dropdown-Liste standardmäßig lauten "Any", wie könnte ich dies "Fruit"im JqGrid-Ereignis ändern loadComplete?

Ist das möglich?

Für select2 Version> = 4.0.0

Die anderen Lösungen funktionieren möglicherweise nicht, die folgenden Beispiele sollten jedoch funktionieren.

Lösung 1: Löst alle angehängten Änderungsereignisse aus, einschließlich select2

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

Lösung 2: Löst das Ereignis JUST select2 change aus

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

Beispiele hierfür finden Sie in dieser jsfiddle . Vielen Dank an @minlare für Lösung 2.

Erläuterung:

Angenommen, ich habe einen besten Freund mit den Namen der Leute ausgewählt. Also Bob, Bill und John (in diesem Beispiel gehe ich davon aus, dass der Wert mit dem Namen identisch ist). Zuerst initialisiere ich select2 auf meinem select:

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

Jetzt wähle ich Bob manuell im Browser aus. Als nächstes macht Bob etwas Unartiges und ich mag ihn nicht mehr. Das System hebt Bob für mich auf:

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

Oder sagen Sie, ich lasse das System anstelle von Bob das nächste in der Liste auswählen:

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

Hinweise zur Select 2-Website (siehe Veraltete und entfernte Methoden ), die für andere nützlich sein können:

.select2 ('val') Die "val" -Methode ist veraltet und wird in Select2 4.1 entfernt. Die veraltete Methode enthält den Parameter triggerChange nicht mehr.

Sie sollten stattdessen direkt .val für das zugrunde liegende Element aufrufen. Wenn Sie den zweiten Parameter (triggerChange) benötigen, sollten Sie auch .trigger ("change") für das Element aufrufen.

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

Wenn Sie sich die select2-Dokumente ansehen, verwenden Sie die folgenden Informationen , um den Wert abzurufen / festzulegen .

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

@PanPipes hat darauf hingewiesen, dass sich dies für 4.x geändert hat (werfen Sie ihm unten eine positive Bewertung). valwird jetzt direkt aufgerufen

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

Innerhalb loadCompletedes jqGrid können Sie also den gewünschten Wert abrufen und dann den Selectbox-Wert festlegen.

Hinweis aus den Dokumenten

Beachten Sie, dass Sie zur Verwendung dieser Methode die Funktion initSelection in den Optionen definieren müssen, damit Select2 weiß, wie die ID des Objekts, das Sie in val () übergeben, in das vollständige Objekt umgewandelt wird, das zum Rendern der Auswahl erforderlich ist. Wenn Sie an ein ausgewähltes Element anhängen, ist diese Funktion bereits für Sie bereitgestellt.

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

Dies sollte hilfreich sein.

Dies sollte noch einfacher sein.

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

Stellen Sie jedoch sicher, dass die von Ihnen übergebenen Werte bereits in der HTMl vorhanden sind

Wenn Sie neue value='newValue'und hinzufügen möchten text='newLabel', sollten Sie diesen Code hinzufügen:

1. Neue Option hinzufügen zu <select>:

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

2. Trigger <select>Änderung ausgewählten Wert:

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

Ich wollte nur eine zweite Antwort hinzufügen. Wenn Sie die Auswahl bereits als Auswahl2 gerendert haben, muss dies wie folgt in Ihrer Auswahl angezeigt werden:

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

Sie haben zwei Möglichkeiten: Wenn die Antwort von @PanPipes lautet, können Sie Folgendes tun.

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

Dies ist nur dann eine akzeptable Lösung, wenn keine benutzerdefinierten Aktionen an das Änderungsereignis gebunden sind. Die Lösung, die ich in dieser Situation verwende, besteht darin, ein select2-spezifisches Ereignis auszulösen, das die angezeigte select2-Auswahl aktualisiert.

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

Probleme beim Festlegen einer in select2 ausgewählten String-Option:

Mit der Option: "Option string1 / Option" verwendet:

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

ABER mit einer Option mit einem Wert: Optionswert "E" string1 / Option:

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

Hoffe, dass dies jemandem hilft, der mit dem gleichen Problem zu kämpfen hat.

Wenn Sie einen einzelnen Wert auswählen möchten, verwenden Sie $('#select').val(1).change()

Wenn Sie mehrere Werte auswählen möchten, legen Sie den Wert im Array fest, damit Sie diesen Code verwenden können $('#select').val([1,2,3]).change()

Für V4 Select2, wenn Sie sowohl den Wert von select2 als auch die Textdarstellung des Dropdowns ändern möchten.

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

Dadurch wird nicht nur der Wert hinter den Kulissen festgelegt, sondern auch die Textanzeige für select2.

Abgerufen von https://select2.github.io/announcements-4.0.html#removed-methods

Mein erwarteter Code:

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

Ich arbeite perfekt, danke an @PanPipes für die nützliche.

mach das

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

Wenn Sie eine Ajax-Datenquelle haben, lesen Sie diese bitte, um Fehler zu vermeiden

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

// Richten Sie das Select2-Steuerelement ein

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

// Das vorgewählte Element abrufen und dem Steuerelement hinzufügen

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

Wenn Sie ein ausgewähltes Element festlegen möchten, wenn Sie den Text aus der Dropdown-Liste kennen und den Wert nicht kennen, finden Sie hier ein Beispiel:

Angenommen, Sie haben eine Zeitzone herausgefunden und möchten sie festlegen, aber die Werte enthalten time_zone_idsie.

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

Schriftart: Wählen Sie 2 Dokumentationen aus

Sie können einfach die get / set-Methode verwenden, um den Wert festzulegen

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

oder Sie können dies tun:

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