Ändern Sie den ausgewählten Wert einer Dropdown-Liste mit jQuery


840

Ich habe eine Dropdown-Liste mit bekannten Werten. Ich versuche, die Dropdown-Liste auf einen bestimmten Wert zu setzen, von dem ich weiß, dass er mit jQuery vorhanden ist . Mit normalem JavaScript würde ich so etwas tun:

ddl = document.getElementById("ID of element goes here");
ddl.value = 2; // 2 being the value I want to set it too.

Ich muss dies jedoch mit jQuery tun , da ich eine CSS- Klasse für meinen Selektor verwende (dumme ASP.NET- Client-IDs ...).

Hier sind einige Dinge, die ich versucht habe:

$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.

Wie kann ich das mit jQuery machen ?


Aktualisieren

Wie sich herausstellte, hatte ich es gleich beim ersten Mal richtig mit:

$("._statusDDL").val(2);

Wenn ich eine Warnung direkt darüber platziere, funktioniert sie einwandfrei, aber wenn ich die Warnung entferne und sie mit voller Geschwindigkeit laufen lasse, wird der Fehler angezeigt

Die ausgewählte Eigenschaft konnte nicht festgelegt werden. Ungültiger Index

Ich bin nicht sicher, ob es ein Fehler mit jQuery oder Internet Explorer 6 ist (ich vermute Internet Explorer 6 ), aber es ist schrecklich ärgerlich.


21
Das Problem hier war schließlich ein Problem mit IE6. Ich habe neue Optionselemente für das Auswahlelement erstellt und dann versucht, den Wert auf eines dieser neu erstellten Optionselemente festzulegen. IE6 wartet fälschlicherweise, bis es die Kontrolle von einem Skript zurückerhalten hat, um die neuen Elemente im DOM tatsächlich so effektiv zu erstellen. Ich habe versucht, die Dropdown-Listen auf Optionen zu setzen, die noch nicht vorhanden waren, obwohl sie vorhanden sein sollten.
Phairoh

Sie könnten reines Javascript verwendendd1 = document.getElementsByClassName('classname here'); dd1.value = 2;
user2144406

Antworten:


1008

In der Dokumentation von jQuery heißt es:

[jQuery.val] aktiviert oder wählt alle Optionsfelder, Kontrollkästchen und Optionen aus, die dem Wertesatz entsprechen.

Dieses Verhalten ist in jQueryVersionen 1.2und höher.

Sie möchten höchstwahrscheinlich Folgendes:

$("._statusDDL").val('2');

22
Funktioniert das, wenn das selectversteckt ist ( display: none;)? Ich kann es nicht richtig zum
Laufen bringen

11
Das hat mich nur davor bewahrt, Dinge wie $('._statusDDL [value="2"]').attr('selected',true);Danke zu schreiben !
Basil

6
@Nordes das wäre der Fall, wenn der ausgewählte Wert erhalten würde. In diesem Fall wird der ausgewählte Wert oder genauer die ausgewählte Option eingestellt.
Jon P

107
@ JL: Sie müssen hinzufügen .change(), um die Option im Dropdown-Listen-Frontend zu sehen, dh$('#myID').val(3).change();
Kai Noack

10
Die Verkettung von .change () sollte zur Antwort hinzugefügt werden. Ich dachte, ich würde verrückt werden, wenn diese Lösung nicht funktioniert, bis ich die Kommentare durchgelesen habe.
David Baucum

139

Bei verstecktem Feld müssen Sie Folgendes verwenden:

$("._statusDDL").val(2);
$("._statusDDL").change();

oder

$("._statusDDL").val(2).change();

Könnten Sie bitte erklären, warum Sie ein Änderungsereignis für versteckte Felder auslösen müssen?
Samuel

1
@Samuel: Wenn Sie die ausgewählte Option einer Auswahl mit jQuery ändern, wird die Änderung nicht ausgelöst, sodass ein manueller Auslöser erforderlich ist.
Machineaddict

2
Wenn nach dem Ändern des Werts der Dropbox ein Änderungsereignis ausgelöst werden muss, müssen Sie die Änderungsfunktion nach dem Festlegen des Werts aufrufen.
tver3305

Ich brauchte speziell das Änderungsereignis, um zu feuern, daher war dies für mich am hilfreichsten
Rohan,

32

Nur zu Ihrer Information, Sie müssen keine CSS-Klassen verwenden, um dies zu erreichen.

Sie können die folgende Codezeile schreiben, um den richtigen Kontrollnamen auf dem Client zu erhalten:

$("#<%= statusDDL.ClientID %>").val("2");

ASP.NET rendert die Steuerelement-ID korrekt in der jQuery.


8
Dies funktioniert nur, wenn sich Ihr Javascript innerhalb des .aspx- oder .ascx-Markups befindet und nicht, wenn es sich in der .js-Datei befindet, wie dies hier der Fall war. Abhängig davon, wie tief Ihre Steuerelemente in Ihrer Anwendung verschachtelt sind (in meinem Fall waren sie ungefähr 10 Ebenen tief), kann die ClientID unglaublich lang werden und die Größe Ihres Javascript erheblich aufblähen, wenn sie zu großzügig verwendet wird. Ich versuche, mein Markup so klein wie möglich zu halten, wenn ich kann.
Phairoh

2
@ y0mbo Aber selbst wenn Sie zu MVC wechseln, sollten Sie externe .JS-Dateien für Ihr JavaScript verwenden, damit Browser und Proxyserver es für die Leistung zwischenspeichern können.
7wp

1
@Roberto - aber MVC verwendet nicht die dummen Namenskonventionen, die asp.net-Webformulare anwenden, sodass Sie in einer externen js-Datei bequem auf die Steuerelemente verweisen können, die Sie benötigen.
Lloydphillips

6
Wenn Sie Javascript im OO-Stil erstellen, können Sie Ihre Client-IDs an den Konstruktor Ihres Objekts übergeben. Der Objektcode ist alle in einer externen js-Datei enthalten, aber Sie instanziieren ihn aus Ihrem Aspx-Code.
Mikeigsigs

1
Ich würde früher ClientIDMode = "Static" für die asp-Steuerelemente festlegen, damit Sie wissen, dass die ID die von Ihnen angegebene ID ist. Sie müssen jedoch vorsichtig sein, wenn Sie diese Steuerung dann in einen Repeater einbauen. msdn.microsoft.com/en-us/library/…
Shawson

25

Versuche es einfach mit

$("._statusDDL").val("2");

und nicht mit

$("._statusDDL").val(2);

23

Diese Lösungen scheinen davon auszugehen, dass jedes Element in Ihren Dropdown-Listen einen val () -Wert hat, der sich auf seine Position in der Dropdown-Liste bezieht.

Die Dinge sind etwas komplizierter, wenn dies nicht der Fall ist.

Um den ausgewählten Index einer Dropdown-Liste zu lesen , verwenden Sie Folgendes:

$("#dropDownList").prop("selectedIndex");

Um gesetzt den ausgewählten Index aus einer Dropdown - Liste, würden Sie verwenden:

$("#dropDownList").prop("selectedIndex", 1);

Beachten Sie, dass für die Funktion prop () JQuery v1.6 oder höher erforderlich ist.

Mal sehen, wie Sie diese beiden Funktionen verwenden würden.

Angenommen, Sie hatten eine Dropdown-Liste mit Monatsnamen.

<select id="listOfMonths">
  <option id="JAN">January</option>
  <option id="FEB">February</option>
  <option id="MAR">March</option>
</select>

Sie können die Schaltflächen "Vorheriger Monat" und "Nächster Monat" hinzufügen, die das aktuell ausgewählte Dropdown-Listenelement anzeigen und in den vorherigen / nächsten Monat ändern:

<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />

Und hier ist das JavaScript, das diese Schaltflächen ausführen würden:

function btnPrevMonth_Click() {
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    if (selectedIndex > 0) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex - 1);
    }
}
function btnNextMonth_Click() {
    //  Note:  the JQuery "prop" function requires JQuery v1.6 or later
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    var itemsInDropDownList = $("#listOfMonths option").length;

    //  If we're not already selecting the last item in the drop down list, then increment the SelectedIndex
    if (selectedIndex < (itemsInDropDownList - 1)) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex + 1);
    }
}

Die folgende Site ist auch nützlich, um zu zeigen, wie eine Dropdown-Liste mit JSON-Daten gefüllt wird:

http://mikesknowledgebase.com/pages/Services/WebServices-Page8.htm

Puh !!

Hoffe das hilft.


20

Nachdem ich mir einige Lösungen angesehen hatte, funktionierte dies für mich.

Ich habe eine Dropdown-Liste mit einigen Werten und möchte denselben Wert aus einer anderen Dropdown-Liste auswählen ... Also habe ich zuerst eine Variable der selectIndexersten Dropdown- Liste eingegeben.

var indiceDatos = $('#myidddl')[0].selectedIndex;

Dann wähle ich diesen Index in meiner zweiten Dropdown-Liste aus.

$('#myidddl2')[0].selectedIndex = indiceDatos;

Hinweis:

Ich denke, dies ist die kürzeste, zuverlässigste, allgemeinste und eleganteste Lösung.

In meinem Fall verwende ich das Datenattribut der ausgewählten Option anstelle des Wertattributs. Wenn Sie also nicht für jede Option einen eindeutigen Wert haben, ist die oben beschriebene Methode die kürzeste und süßeste !!


5
Dies ist die richtige Antwort, und jeder, der nicht sofort 'selectedIndex' gesagt hat, sollte es besser wissen. Hurra DOM API und die Leute, die es in der Steinzeit geschrieben haben.
vsync

16

Ich weiß, dass dies eine alte Frage ist und die oben genannten Lösungen außer in einigen Fällen gut funktionieren.

Mögen

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

Daher wird Element 4 im Browser als "Ausgewählt" angezeigt. Jetzt möchten Sie den Wert als 3 ändern und "Element 3" als ausgewählt anstelle von Element 4 anzeigen

jQuery("#select_selector").val(3);

Sie werden sehen, dass Element 3 im Browser ausgewählt ist. Wenn Sie die Daten jedoch entweder in PHP oder ASP verarbeiten, finden Sie den ausgewählten Wert als "4". Der Grund dafür ist, dass Ihr HTML so aussieht.

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3" selected="selected">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

und es erhält den letzten Wert als "4" in der Sprache der Server.

Also meine letzte Lösung in dieser Hinsicht

newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');  

BEARBEITEN : Fügen Sie ein einfaches Anführungszeichen um "+ newselectedIndex +" hinzu, damit dieselbe Funktionalität für nicht numerische Werte verwendet werden kann.

Ich habe also das ausgewählte Attribut entfernt und das neue als ausgewählt festgelegt.

Ich würde mich über Kommentare von erfahrenen Programmierern wie @strager, @ y0mbo, @ISIK und anderen freuen


10

Wenn wir ein Dropdown mit dem Titel "Datenklassifizierung" haben:

<select title="Data Classification">
    <option value="Top Secret">Top Secret</option>
    <option value="Secret">Secret</option>
    <option value="Confidential">Confidential</option>
</select>

Wir können es in eine Variable bringen:

var dataClsField = $('select[title="Data Classification"]');

Fügen Sie dann den Wert, den das Dropdown haben soll, in eine andere Variable ein:

var myValue = "Top Secret";  // this would have been "2" in your example

Dann können wir das Feld, in das wir eingegeben haben dataClsField, verwenden, eine Suche durchführen myValueund es auswählen mit .prop():

dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected');

Oder Sie können nur verwenden .val(), aber Ihr Selektor von .kann nur verwendet werden, wenn er mit einer Klasse in der Dropdown-Liste übereinstimmt, und Sie sollten Anführungszeichen für den Wert in der Klammer verwenden oder einfach die zuvor festgelegte Variable verwenden:

dataClsField.val(myValue);

4

Also habe ich es so geändert, dass es jetzt nach 300 Millisekunden mit setTimeout ausgeführt wird. Scheint jetzt zu arbeiten.

Ich bin beim Laden von Daten aus einem Ajax-Aufruf oft darauf gestoßen. Ich verwende auch .NET, und es braucht Zeit, um sich an die clientId anzupassen, wenn ich den jQuery-Selektor verwende. Um das Problem zu beheben und zu vermeiden, dass eine setTimeoutEigenschaft hinzugefügt werden muss , können Sie einfach " async: false" in den Ajax-Aufruf einfügen. Dadurch hat das DOM genügend Zeit, um die Objekte, die Sie zur Auswahl hinzufügen, wieder zu haben. Ein kleines Beispiel unten:

$.ajax({
    type: "POST",
    url: document.URL + '/PageList',
    data: "{}",
    async: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        var pages = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

        $('#locPage' + locId).find('option').remove();

        $.each(pages, function () {
            $('#locPage' + locId).append(
                $('<option></option>').val(this.PageId).html(this.Name)
            );
        });
    }
});

3

Nur eine Anmerkung - Ich habe in jQuery Platzhalter-Selektoren verwendet, um Elemente zu erfassen, die von ASP.NET-Client-IDs verschleiert werden. Dies könnte Ihnen auch helfen:

<asp:DropDownList id="MyDropDown" runat="server" />

$("[id* = 'MyDropDown']").append("<option value='-1'>&nbsp;</option>"); //etc

Beachten Sie den Platzhalter id * - dies findet Ihr Element auch dann, wenn der Name "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown" lautet.


3

Ich verwende eine Erweiterungsfunktion, um Client-IDs abzurufen:

$.extend({
    clientID: function(id) {
        return $("[id$='" + id + "']");
    }
});

Anschließend können Sie ASP.NET-Steuerelemente in jQuery folgendermaßen aufrufen:

$.clientID("_statusDDL")

3

Eine andere Möglichkeit besteht darin, den Steuerparameter ClientID = "Static" in .net festzulegen. Anschließend können Sie über die von Ihnen festgelegte ID auf das Objekt in JQuery zugreifen.


3
<asp:DropDownList id="MyDropDown" runat="server" />

Verwenden Sie $("select[name$='MyDropDown']").val().


Wenn Sie mit dem Namen übereinstimmen, können Sie ihn auch entfernen, $damit er vollständig übereinstimmt und nicht mit "endet". Aber Ihr Vorschlag ist wahrscheinlich schneller als nur die Übereinstimmung mit einem Klassennamen. Noch schneller wäre element.classnameoder #idname.
Alec

2

Wie laden Sie die Werte in die Dropdown-Liste oder bestimmen, welchen Wert Sie auswählen möchten? Wenn Sie dies mit Ajax tun, kann der Grund dafür sein, dass Sie die Verzögerung benötigen, bevor die Auswahl erfolgt, weil die Werte zum Zeitpunkt der Ausführung der betreffenden Zeile nicht geladen wurden. Dies würde auch erklären, warum es funktioniert hat, wenn Sie eine Warnmeldung in die Zeile einfügen, bevor Sie den Status festlegen, da die Warnaktion eine ausreichende Verzögerung für das Laden der Daten bietet.

Wenn Sie eine der Ajax-Methoden von jQuery verwenden, können Sie eine Rückruffunktion angeben und diese dann $("._statusDDL").val(2);in Ihre Rückruffunktion einfügen.

Dies wäre eine zuverlässigere Methode zur Behandlung des Problems, da Sie sicher sein können, dass die Methode ausgeführt wurde, als die Daten bereit waren, selbst wenn sie länger als 300 ms dauerte.


2
<asp:DropDownList ID="DropUserType" ClientIDMode="Static" runat="server">
     <asp:ListItem Value="1" Text="aaa"></asp:ListItem>
     <asp:ListItem Value="2" Text="bbb"></asp:ListItem>
</asp:DropDownList>

ClientIDMode = "Statisch"

$('#DropUserType').val('1');

1

In meinem Fall konnte ich es mit der .attr () -Methode zum Laufen bringen.

$("._statusDDL").attr("selected", "");
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.