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

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.

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

Bei verstecktem Feld müssen Sie Folgendes verwenden:

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

oder

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

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.

Versuche es einfach mit

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

und nicht mit

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

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.

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

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

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

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

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.

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

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.

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

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

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.

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

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

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