webentwicklung-frage-antwort-db.com.de

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

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

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

Ist das möglich?

162
Adam K Dean

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

Siehe hierzu jsfiddle für Beispiele. Danke an @minlare für Lösung 2.

Erläuterung:

Angenommen, ich habe einen besten Freund ausgewählt, der die Namen der Personen enthält. Also Bob, Bill und John (in diesem Beispiel gehe ich davon aus, dass der Wert dem Namen entspricht). 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. Also deaktiviert das System Bob für mich:

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

Oder sagen Sie, ich sorge dafür, dass das System anstelle von Bob das nächste in der Liste auswählt:

// 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önnten:

.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 .val für das zugrunde liegende Element aufrufen. Wenn Sie den zweiten Parameter (triggerChange) benötigen, sollten Sie .trigger ("change") für das Element aufrufen.

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

Wenn Sie sich select2 docs ansehen, verwenden Sie das Folgende, 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. val wird jetzt direkt aufgerufen

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

Innerhalb von loadComplete des jqGrid können Sie also den gewünschten Wert abrufen und dann den Wert für selectbox festlegen.

Hinweis aus den Dokumenten

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

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

das sollte hilfreich sein.

30
Yasser

Dies sollte noch einfacher sein. 

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

Stellen Sie jedoch sicher, dass die Werte, die Sie übergeben, bereits im HTMl vorhanden sind

16
Neelu

Ich wollte nur eine zweite Antwort hinzufügen. Wenn Sie die Auswahl bereits als Auswahl2 gerendert haben, müssen Sie diese in Ihrer Auswahl wie folgt anzeigen lassen:

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

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

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

    var opt = "<option value='newValue' selected ='selected'>" + newLabel+ " </option>";
    $(selLocationID).html(opt);
    
  2. <select> auslösen, um den ausgewählten Wert zu ändern:

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

Sie haben zwei Möglichkeiten - als @PanPipes-Antwortstatus 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, ist das Auslösen eines select2-spezifischen Ereignisses, das die angezeigte select2-Auswahl aktualisiert.

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

Einige Probleme mit der Einstellung einer String-Option in select2 haben:

Mit der Option: "Option String1/Option" wird Folgendes 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.

9
Aldodzb

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

wenn Sie mehrere Werte auswählen möchten, setzen Sie den Wert in array, damit Sie diesen Code verwenden können $('#select').val([1,2,3]).change()

6
Utkarsh Pandey

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.

Gezogen aus https://select2.github.io/announcements-4.0.html#removed-methods

5
Rmalmoe

Mein erwarteter Code: 

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

perfekt funktioniert dank @PanPipes für das nützliche. 

wenn Sie eine Ajax-Datenquelle haben, beziehen Sie sich bitte auf Fehlerfrei

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

// Richten Sie das Select2-Steuerelement ein

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

// Holen Sie das vorausgewählte Element und fügen Sie es dem Steuerelement hinzu

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

mach das 

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

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

Angenommen, Sie haben eine Zeitzone gefunden und möchten diese einstellen, aber Werte enthalten time_zone_id.

        var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        var $select2 = $('#time-zone');
        var selected = $select2.find("option:contains('"+timeZone+"')").val();
        $select2.val(selected).trigger('change.select2'); 
0

sie können einfach die Methode get/set 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
0
Foram Thakral
// 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: 2 Dokumentation auswählen

0
CodeNoob