Ä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

Nachdem ich mir einige Lösungen angeschaut hatte, funktionierte dies bei mir.

Ich habe eine Dropdown-Liste mit einigen Werten, und ich möchte denselben Wert aus einer anderen Dropdown-Liste auswählen... Also setze ich zuerst in eine Variable die selectIndex meines ersten Dropdowns.

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

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

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

Nota:

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

Denn in meinem Fall verwende ich das data-Attribut der ausgewählten Option anstelle des value-Attributs. Wenn Sie also keinen eindeutigen Wert für jede Option haben, ist die obige Methode die kürzeste und beste!

Answer 2

Ich weiß, dies ist eine alte Frage und die oben genannten Lösungen funktionieren 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>

So wird Element 4 als "Ausgewählt" im Browser angezeigt, und jetzt möchten Sie den Wert als 3 ändern und "Element3" als ausgewählt anstelle von Element4 anzeigen.

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

Sie werden sehen, dass Item 3 im Browser ausgewählt ist, aber wenn Sie die Daten entweder in php oder asp verarbeiten, werden Sie den ausgewählten Wert als "4" vorfinden, weil Ihr html so aussehen wird.

<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 erhält den letzten Wert als "4" in der Sprache "sever side".

MEINE ENDGÜLTIGE LÖSUNG IN DIESER HINSICHT LAUTET ALSO

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

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

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

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

Answer 3

Wenn wir ein Dropdown-Menü 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 sie in eine Variable aufnehmen:

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

Geben Sie dann in eine andere Variable den Wert ein, den die Auswahlliste 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 , suchen Sie nach myValue und markieren Sie es mit .prop() :

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

Oder Sie könnten einfach Folgendes verwenden .val() , aber Ihr Selektor von . kann nur verwendet werden, wenn es mit einer Klasse in der Auswahlliste übereinstimmt, und Sie sollten den Wert innerhalb der Klammern in Anführungszeichen setzen oder einfach die Variable verwenden, die wir zuvor festgelegt haben:

dataClsField.val(myValue);

Answer 4

Also habe ich es so geändert, dass es jetzt nach 300 Milisekunden ausgeführt wird, indem ich setTimeout. Scheint jetzt zu funktionieren.

Dies ist mir beim Laden von Daten aus einem Ajax-Aufruf schon oft passiert. Auch ich verwende .NET, und es dauert eine Weile, bis ich mich auf die clientId eingestellt habe, wenn ich den jQuery-Selektor verwende. Um das Problem zu beheben, das Sie haben, und um zu vermeiden, dass Sie eine setTimeout Eigenschaft, können Sie einfach " async: false "im Ajax-Aufruf, und es wird dem DOM genug Zeit geben, die Objekte, die Sie der 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)
            );
        });
    }
});

Answer 5

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

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