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

Bei ausgeblendetem Feld müssen Sie Folgendes verwenden:

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

oder

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

Nur zur Information, Sie müssen dazu keine CSS-Klassen verwenden.

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

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

ASP.NET gibt die Steuerelement-ID in der jQuery korrekt wieder.

Versuchen Sie es einfach mit 

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

und nicht mit 

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

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

Ich habe eine Dropdown-Liste mit einigen Werten, und ich möchte den gleichen Wert aus einer anderen Dropdown-Liste auswählen ... Zuerst füge ich in einer Variablen die Variable selectIndex meines ersten Dropdown-Menüs ein.

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

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

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

Hinweis:

Ich denke, das ist die kürzeste, zuverlässige, allgemeine und elegante Lösung.

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

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

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

Zum Lesen des ausgewählten Index einer Dropdown-Liste würden Sie Folgendes verwenden:

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

Um set den ausgewählten Index einer Dropdown-Liste zu verwenden, würden Sie Folgendes 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 nutzen 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 eine Schaltfläche "Vorheriger Monat" und "Nächster Monat" hinzufügen, mit der das aktuell ausgewählte Dropdown-Listenelement betrachtet und in den vorherigen/nächsten Monat geändert wird:

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

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

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. Nun möchten Sie den Wert als 3 ändern und "Item3" als ausgewählt anstelle von Item4 anzeigen 

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

Sie werden dieses Element 3 als in Browser ausgewählt sehen. Aber wenn Sie die Daten entweder in PHP oder ASP verarbeiten, werden Sie den ausgewählten Wert als "4" finden.

<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 als "4" in der Sprache des Servers angegeben.

SO MEINE LETZTE LÖSUNG IN DIESEM HINBLICK

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

EDIT: Hinzufügen von Anführungszeichen um "+ newselectedIndex +", damit für nicht-numerische Werte dieselbe Funktionalität verwendet werden kann.

Was ich also tue, ist, das ausgewählte Attribut zu entfernen und dann das neue als ausgewählt auszuwählen.

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

Wenn wir ein Dropdown mit dem Titel "Data Classification" 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"]');

Geben Sie dann in eine andere Variable den Wert ein, den die Dropdown-Liste haben soll:

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

Dann können wir das Feld verwenden, das wir in dataClsField einfügen, eine Suche nach myValue durchführen und es mit .prop() auswählen:

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

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

dataClsField.val(myValue);

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

Ich bin beim Laden von Daten aus einem Ajax-Aufruf oft darauf gestoßen. Ich verwende auch .NET und es dauert einige Zeit, um mich an die clientId anzupassen, wenn Sie den jQuery-Selector verwenden. Um das Problem zu beheben, das Sie haben, und um zu vermeiden, dass Sie eine setTimeout -Eigenschaft hinzufügen, können Sie einfach "async: false" in den Ajax-Aufruf eingeben. Dadurch erhält das DOM genügend Zeit, um die Objekte zurückzugeben, die Sie dem hinzufügen wählen. Eine kleine Probe 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)
            );
        });
    }
});

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

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

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

Beachten Sie die ID * Wildcard - das Element wird auch dann gefunden, wenn der Name "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown" lautet.

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

Ich verwende eine Erweiterungsfunktion, um Client-IDs abzurufen:

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

Dann können Sie ASP.NET-Steuerelemente in jQuery wie folgt aufrufen:

$.clientID("_statusDDL")

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

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

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

Wie laden Sie die Werte in die Dropdown-Liste oder bestimmen, welchen Wert Sie auswählen sollen? Wenn Sie dies mit Ajax tun, besteht der Grund dafür, dass Sie die Verzögerung benötigen, bevor die Auswahl erfolgt, weil die Werte zu dem Zeitpunkt nicht geladen wurden, zu dem die betreffende Zeile ausgeführt wurde. Dies würde auch erklären, warum es funktioniert hat, wenn Sie vor dem Festlegen des Status eine Alert-Anweisung in die Zeile schreiben, da die Alert-Aktion eine ausreichende Verzögerung für das Laden der Daten ergibt.

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

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

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

$("._statusDDL").attr("selected", "");