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


178

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?

Antworten:


407

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

8
Dies ist die richtige Antwort: Es funktioniert sowohl in Mono-Select als auch in Multi-Select
Giovanni Di Milia

4
Dies ist nur dann eine akzeptable Lösung, wenn keine benutzerdefinierten Aktionen an das changeEreignis gebunden sind (z. B. das Neuladen des Formulars). Andernfalls würden diese Aktionen beim Auslösen redundant aufgerufen change().
van_folmert

Wenn dies nicht richtig funktioniert, fügen Sie ein setTimeout hinzu: setTimeout (function () {$ ("select"). Val ("1"). Trigger ("change");}, 1000);
Abel

@van_folmert Ich habe das gleiche Problem. Im Idealfall möchte ich ändern, was als ausgewählt angezeigt wird, ohne ein Ereignis onChange
auszulösen

1
Siehe meine Antwort unten für ein Beispiel, wie man @van_folmert Problem löst
minlare

135

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.


Scheint nicht mit der Demo zu funktionieren, die ich mir ansehe. Ich bin mir nicht sicher warum, es kann etwas damit zu tun haben, wie es in JqGrid eingesteckt wird.
Adam K Dean

1
Die Antwort wurde aktualisiert. Sieht so aus, als müssten Sie diese Funktion manuell zur Initialisierung von select2 hinzufügen, damit sie weiß, wie der valAnruf behandelt wird.
Jack

1
@AdamKDean: Man kann zusätzlich testen, ob <select>auf select2Kontrolle umgestellt wurde, indem man das Vorhandensein der Klasse select2-offscreenauf dem testet <select>. Alle Elemente der Suchsymbolleiste haben eine ID, die mit dem gs_Präfix beginnt und den Namen wie in hat colModel. Sie können verwenden getGridParam, um zu bekommen colModel.
Oleg

Vielen Dank, ich habe es geschafft, die Filterinformationen abzurufen. Ich brauche nur eine Möglichkeit, sie festzulegen, nachdem die Filterleiste mit der select2Auswahl neu erstellt wurde. Ich werde heute noch einen Blick darauf werfen, vielleicht kann ich es mit frischen Augen reparieren. Danke noch einmal. Update: Das Umschließen des Codes in eine boolesche Prüfung hat das Problem behoben, das ich hatte, obwohl die Aktualisierung der Suchleiste gestoppt wurde, anstatt das vorherige Element erneut auszuwählen.
Adam K Dean


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

Dies sollte hilfreich sein.


3
Beispiel für mehrere Werte: this. $ ("# YourSelector"). Select2 ("data", [{id: 1, text: "Some Text"}, {id: 2, text: "Some Other Text"}]);
RodneyRd

18

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


17

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 finde das sauberer als mit den select2 'Daten' herumzuspielen :) Ändere den Dom, lass select2 den Rest herausfinden.
Paulj

Ich teste auf Safari und dies ist die einzige Lösung, die tatsächlich funktioniert. Die anderen sind beredter und ich würde sie bevorzugen, aber mehr als alles andere bevorzuge ich Arbeitscode. Und das ist es. :)
David

Vielen Dank dafür! Ich arbeite mit ausgewählten 2 Feldern, in denen beide Felder mit Ajax gefüllt sind, und ich habe zusätzliche Dateneigenschaften für das erste Feld verwendet, um den Wert des zweiten Felds damit festzulegen. Nochmals vielen Dank!!!!
Sam

16

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

12

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

Ja, dies ist die beste Allround-Lösung. Ich denke wirklich, Select2 sollte das interne Ereignis 'change.select2' automatisch auslösen, um die Anzeige zu aktualisieren, wenn der Wert geändert wird. Dies bietet jedoch zumindest eine einfache Möglichkeit, die Anzeige an den neuen Wert anzupassen, ohne benutzerdefinierte Änderungsereignishandler auszulösen.
DaveInMaine

this '$ (element) .val (val) .trigger (' change.select2 ');' arbeitete für mich. Vielen Dank, dass Sie @minlare.
Ray

9

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.


5

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()


Dies funktioniert nicht, wenn Sie eine Zeichenfolge in eckigen Klammern eingeben.
Utkarsh Pandey

5

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


Versuchen Sie zu triggern ('change.select2'). Trigger ('select2: select'); wenn nur Veränderung nicht genug ist
Tebe

4

Mein erwarteter Code:

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

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


4

mach das

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

Während dieser Code die Frage möglicherweise beantwortet, verbessert die Bereitstellung eines zusätzlichen Kontexts darüber, warum und / oder wie dieser Code die Frage beantwortet, ihren langfristigen Wert.
Rollstuhlfahrer

Ich habe keine Kenntnisse über JqGrid, aber mit diesem Code können Sie select2 Wert auf einfache Weise
ändern

2

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

1

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

0
// 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


0

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
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.