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

die jQuery-Dokumentation Staaten:

[jQuery.val] überprüft, oder wähltalle radio-buttons, Checkboxen und wählen Sie Optionen aus, passen die Werte.

Dieses Verhalten ist in jQuery Versionen 1.2 und oben.

Werden Sie wahrscheinlich wollen, dass diese:

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

InformationsquelleAutor der Antwort strager

Nur ein FYI, Sie brauchen nicht zu verwenden CSS-Klassen, um dies zu erreichen.

Schreiben Sie die folgende Codezeile, um die richtigen control-Namen auf dem client:

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

ASP.NET machen die Steuerelement-ID richtig im jQuery.

InformationsquelleAutor der Antwort y0mbo

Diese Lösungen scheinen anzunehmen, dass die einzelnen Elemente in der drop-down-Listen hat ein val() Wert in Bezug auf Ihre position in der drop-down-Liste.

Dinge sind ein wenig komplizierter, wenn dies nicht der Fall ist.

Zu Lesen den ausgewählten index aus einem drop-down-Liste, verwenden Sie diese:

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

Zu set den ausgewählten index aus einem drop-down-Liste, verwenden Sie diese:

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

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

Lassen Sie uns sehen, wie würden Sie diese beiden Funktionen.

Angenommen, dass Sie hatte eine drop-down-Liste der Monatsnamen.

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

Könnte man hinzufügen, "Vorheriger Monat" und "Nächster Monat" - Schaltfläche, die aussieht bei dem aktuell ausgewählten drop-down-Liste den Eintrag, und ändert es, um den vorherigen/nächsten Monat:

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

Folgende Website ist auch nützlich, für die, die zeigt, wie füllen Sie eine Dropdown-Liste mit JSON-Daten:

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

Puh !!

Hoffe, das hilft.

InformationsquelleAutor der Antwort Mike Gledhill

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

Wie

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

Also Punkt 4 wird sich zeigen, als "Ausgewählt" in den browser ein und jetzt wollen Sie den Wert ändern, der als 3-und-show "Item3" ausgewählt anstelle von Element4.Also gemäß der oben genannten Lösungen,wenn Sie

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

Werden Sie sehen, dass Punkt 3 als gewählt im browser.Aber wenn du die Daten verarbeiten, entweder in php oder asp , finden Sie ausgewählte Wert "4".Der Grund dafür ist , dass dein html-Code so Aussehen.

<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 wird der Letzte Wert "4" in Server-side-Sprache.

ALSO MEINE ENDGÜLTIGE LÖSUNG DIESER HINSICHT

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

BEARBEITEN: Fügen Sie einzelne zitieren, um "+newselectedIndex+", so dass die gleiche Funktionalität kann verwendet werden für nicht-numerische Werte.

Also, was ich mache, ist eigentlich ,entfernt das ausgewählte Attribut, und stellen Sie dann die neue als ausgewählt.

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

InformationsquelleAutor der Antwort Rocker Maruf

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

Ich habe dieses viele Male, wenn das laden von Daten aus einem Ajax-call. Auch ich verwenden .NET, und es braucht Zeit, um zu erhalten, angepasst an die clientId bei der Verwendung der jQuery-Selektor. Um das problem zu beheben, das Sie haben und zu vermeiden, fügen Sie ein setTimeout Eigenschaft können Sie setzen Sie einfach "async: false" in der Ajax-Aufruf, und es wird die DOM-genug Zeit, um die Objekte zurück, die Sie hinzufügen, um die wählen Sie. Ein kleines Beispiel:

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

InformationsquelleAutor der Antwort clockwiseq

Weitere option ist, um die Steuerung param ClientID="Statisch".Netz und dann können Sie den Zugriff auf das Objekt in JQuery durch die ID, die Sie gesetzt.

InformationsquelleAutor der Antwort Mych

Wie sind Sie mit dem laden der Werte in der drop-down-Liste oder zu bestimmen, welcher Wert zu wählen? Wenn Sie dies tun, mit Ajax, dann ist der Grund müssen Sie die Verzögerung, bevor die Auswahl erfolgt sein könnte, weil die Werte waren nicht geladen, an der Zeit, dass die betreffende Zeile ausgeführt. Dies würde auch erklären, warum es funktioniert, wenn Sie eine alert-Anweisung auf der Zeile vor der Einstellung der status seit der alert-Aktion geben würde, genug von einer Verzögerung, die Daten zu laden.

Wenn Sie mit einer jQuery-Ajax-Methoden, können Sie eine callback-Funktion und setzen Sie dann $("._statusDDL").val(2); in der callback-Funktion.

Wäre dies ein zuverlässiger Umgang mit dem Thema, da Sie sicher sein konnte, dass die Methode, die ausgeführt wird, wenn die Daten bereit war, auch wenn es länger dauerte als 300 ms.

InformationsquelleAutor der Antwort Pervez Choudhury

<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="Static"

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

InformationsquelleAutor der Antwort hamze shoae