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

Question

Ich habe eine Dropdown-Liste mit bekannten Werten. Ich versuche, die Dropdown-Liste auf einen bestimmten Wert einzustellen, von dem ich weiß, dass er existiert, indem ich jQuery . Regulär verwenden JavaScript würde ich so etwas tun wie:

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 weil ich eine CSS Klasse für meinen Selektor (dumm ASP.NET Client-IDs...).

Hier sind ein paar Dinge, die ich ausprobiert habe:

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

Wie kann ich das tun mit jQuery ?

---

Update

Wie sich herausstellte, hatte ich beim ersten Mal alles richtig gemacht:

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

Wenn ich eine Warnung direkt darüber anbringe, funktioniert es gut, aber wenn ich die Warnung entferne und es mit voller Geschwindigkeit laufen lasse, erhalte ich den Fehler

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

Ich bin mir nicht sicher, ob es ein Fehler in jQuery ist oder Internet Explorer 6 (Ich vermute, dass das Internet Entdecker 6 ), aber es ist furchtbar ärgerlich.

Answer 1

Dokumentation von jQuery Staaten:

[jQuery.val] prüft, oder wählt alle Optionsfelder, Kontrollkästchen und Auswahloptionen, die der Wertemenge entsprechen.

Dieses Verhalten ist in jQuery Versionen 1.2 und darüber.

Wahrscheinlich wollen Sie das:

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

Ajouter .change() um die Option im Frontend der Dropdown-Liste zu sehen:

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

Answer 2

Bei versteckten Feldern müssen Sie wie folgt vorgehen:

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

ou

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

Answer 3

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

Wenn das nicht der Fall ist, ist die Sache etwas komplizierter.

An lesen den ausgewählten Index einer Dropdown-Liste, würden Sie dies verwenden:

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

An einstellen. den ausgewählten Index einer Dropdown-Liste, würden Sie dies verwenden:

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

Beachten Sie, dass die prop() Funktion erfordert JQuery v1.6 oder höher.

Schauen wir uns an, wie Sie diese beiden Funktionen verwenden würden.

Angenommen, Sie haben 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önnten eine Schaltfläche "Vorheriger Monat" und "Nächster Monat" hinzufügen, die das aktuell ausgewählte Dropdown-Listenelement betrachtet und es in den vorherigen/nächsten Monat ändert:

<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ürde:

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

Meine Website ist auch nützlich, um zu zeigen, wie man eine Dropdown-Liste mit JSON-Daten auffüllt:

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

Answer 4

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 wird die ID des Steuerelements innerhalb von jQuery korrekt darstellen.

Answer 5

Versuchen Sie es einfach mit

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

und nicht mit

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