Wie kann ich den Wert einer DropDownList mit jQuery festlegen?

349

Wie stelle ich den Wert eines DropDownList-Steuerelements mithilfe von jQuery ein?

Fleisch
quelle

Antworten:

602
$("#mydropdownlist").val("thevalue");

Stellen Sie einfach sicher, dass der Wert in den Options-Tags mit dem Wert in der val-Methode übereinstimmt.

Nick Berardi
quelle
Ich habe einen Bereichsüberprüfer für eine Dropdown-Liste und setze den Wert der Dropdown-Liste wie oben beschrieben. Der Bereichsüberprüfer fordert mich jedoch immer wieder nicht auf, einen Wert auszuwählen (wenn der ausgewählte Wert innerhalb des Bereichs liegt). Bitte sehen Sie meine Frage stackoverflow.com/questions/3165033/…
James
21
Dies löst das "Änderungs" -Ereignis nicht aus.
AGamePlayer
4
Wollte wiederholen - stellen Sie sicher, dass Sie das Attribut "Wert" festgelegt haben, sonst funktioniert diese Methode nicht. (Ich habe jemandem geholfen, der mir dies gezeigt hat, und mich gefragt, warum es nicht über den Text in der Dropdown-Liste ausgewählt wurde.) Ich wollte sicherstellen, dass dies klar ist.
JasCav
1
+1 musste anrufen $("#mycontrolId").selectmenu('refresh');, um Änderungen zu reflektieren
VladL
Detaillierte Informationen unter diesem Link htmlgoodies.com/beyond/javascript/…
Niamath
52

Wenn Sie mit Index arbeiten, können Sie den ausgewählten Index direkt mit .attr () festlegen:

$("#mydropdownlist").attr('selectedIndex', 0);

Dadurch wird der erste Wert in der Droplist festgelegt.

Bearbeiten: Die Art und Weise, wie ich es oben gemacht habe, hat früher funktioniert. Aber es scheint nicht mehr so.

Aber wie Han in den Kommentaren so angenehm hervorhebt, ist der richtige Weg, dies zu tun:

$("#mydropdownlist").get(0).selectedIndex = index_here;
Mattsson
quelle
7
Dies funktioniert überhaupt nicht, da das selectTag kein Attribut hat selectedIndex. Es ist stattdessen eine Eigenschaft des DOM-Objekts. Daher sollte der Code lauten:$("#mydropdownlist").get(0).selectedIndex = index_here;
Han
5
$("#mydropdownlist").prop('selectedIndex', index_here); Funktioniert auch.
Numaroth
("#mydropdownlist"). get (0) .selectedIndex = index_here; Dieser Weg war funktioniert !! @
Kasim
Gute Möglichkeit, in Dropdown ausgewählt zu ändern, danke
Avtandil Kavrelishvili
spüre
49

Versuchen Sie, wie von @Nick Berardi vorgeschlagen, Folgendes zu tun, wenn Ihr geänderter Wert nicht im Front-End der Benutzeroberfläche angezeigt wird:

$("#mydropdownlist").val("thevalue").change();
IRSHAD
quelle
1
Vielen Dank, nur eine Zeile, ordentlich und hilfreich, um auch das change () - Ereignis einer SelectBox mit jQuery und Laravel Forms auszulösen.
WhySoSerious
Dies ist die einzige Antwort, bei der die Änderung tatsächlich in der Dropdown-Liste angezeigt wurde. selectmenuist in meiner Version von jQuery undefiniert, macht aber change()den Trick.
Chad Hedgcock
Vielen Dank. Dies war der einzige Weg, wie es für mich funktionierte (nachdem ich alles andere darüber ausprobiert hatte).
inspiriert
20

Versuchen Sie diesen sehr einfachen Ansatz:

/*make sure that value is included in the options value of the dropdownlist 
e.g. 
(<select><option value='CA'>California</option><option value='AK'>Alaska</option>      </select>)
*/

$('#mycontrolId').val(myvalue).attr("selected", "selected");
Clyde
quelle
2
Vergessen Sie nicht anzurufen$("#mycontrolId").selectmenu('refresh');
VladL
@VladL Du meinst also $('#mycontrolId').selectmenu('refresh').val(myvalue).attr("selected", "selected");?
Dylan Czenski
9

Wenn Ihre Dropdown-Liste Asp.Net ist, funktioniert der folgende Code einwandfrei.

 $("#<%=DropDownName.ClientID%>")[0].selectedIndex=0;

Wenn Ihr DropDown jedoch ein HTML-Dropdown-Menü ist, funktioniert dieser Code.

 $("#DropDownName")[0].selectedIndex=0;
salah9
quelle
5

Beste Antwort auf die Frage:

$("#comboboxid").val(yourvalue).trigger("chosen:updated");

z.B:

$("#CityID").val(20).trigger("chosen:updated");

oder

$("#CityID").val("chicago").trigger("chosen:updated");
Asif Ramzan
quelle
3

Wert festlegen und Dropdown-Listenereignis aktualisieren

$("#id").val("1234").change();
Jignesh Joisar
quelle
2

Es gibt viele Möglichkeiten, dies zu tun. hier sind einige davon:

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

ODER

$('select').prop('selectedIndex', 3);
Dilip Kumar Yadav
quelle
1
Ihr Profil zeigt an, dass Sie mit dem Link verknüpft sind, den Sie hier eingefügt haben. Das Verknüpfen mit etwas, mit dem Sie verbunden sind (z. B. einem Produkt oder einer Website), ohne anzugeben, dass die Zugehörigkeit in Ihrem Beitrag als Spam bei Stack Exchange / Stack Overflow gilt. Siehe: Was bedeutet "gute" Eigenwerbung? , einige Tipps und Ratschläge zur Eigenwerbung , Was ist die genaue Definition von "Spam" für Stack Overflow? und was macht etwas Spam .
Makyen
1

Ich denke, das kann helfen:

    $.getJSON('<%= Url.Action("GetDepartment") %>', 
              { coDepartment: paramDepartment },
              function(data) {
                    $(".autoCompleteDepartment").empty();
                    $(".autoCompleteDepartment").append($("<option />").val(-1));
                    $.each(data, function() {
                        $(".autoCompleteDepartment").append($("<option />").val(this.CodDepartment).text(this.DepartmentName));
                    });
                    $(".autoCompleteDepartment").val(-1);                                       
              }  
             );

Wenn Sie dies tun, fügen Sie ein Element ohne Text hinzu. Wenn Sie also auf de combo klicken, wird es nicht angezeigt, aber der Wert -1, den Sie später hinzugefügt haben, wird mit $ (". AutoCompleteDepartment") ausgewählt. Val (-1); Mit dieser Option können Sie steuern, ob die Kombination einen gültigen Wert hat.

Hoffe es hilft jedem.

Entschuldigung für mein Englisch.

JapineJ
quelle
1

Wenn Sie nur den Wert eines Dropdowns festlegen müssen, ist der beste Weg

$("#ID").val("2");

Wenn Sie nach dem Aktualisieren des Dropdown-Werts ein Skript auslösen müssen, z. B. Wenn Sie ein onChange-Ereignis in der Dropdown-Liste festlegen und dieses nach dem Aktualisieren der Dropdown-Liste ausführen möchten, müssen Sie dies wie folgt verwenden

$("#ID").val("2").change();
Mannu Saraswat
quelle
0

Hier ist eine Funktion zum schnellen Einstellen der ausgewählten Option:

function SetSelected(elem, val){
        $('#'+elem+' option').each(function(i,d){
        //  console.log('searching match for '+ elem + '  ' + d.value + ' equal to '+ val);
            if($.trim(d.value).toLowerCase() == $.trim(val).toLowerCase()){
        //      console.log('found match for '+ elem + '  ' + d.value);
                $('#'+elem).prop('selectedIndex', i);
            }
        });
    }

Rufen Sie diese Funktion mit der Argumentelement-ID und dem ausgewählten Wert auf. so was:

SetSelected('selectID','some option');

Dies ist nützlich, wenn viele Auswahloptionen festgelegt werden müssen.

vishwakarma09
quelle
0

Falls Sie alle <options ....></options>per Ajax laden, rufen Sie an
Sie dazu die folgenden Schritte aus.

1). Erstellen Sie eine separate Methode für den festgelegten Dropdown-Wert. Beispiel
:

function set_ip_base_country(countryCode)
    $('#country').val(countryCode)
} 

2). Rufen Sie diese Methode auf, wenn der Ajax-Aufruf erfolgreich ist und alle HTML-Anhängeaufgaben abgeschlossen sind

Zum Beispiel:

success: function (doc) {
  .....
  .....
  $("#country").append('<option style="color:black;" value="' + key + '">'  +   value + '</option>')
  set_ip_base_country(ip_base_country)
}
GrvTyagi
quelle
0

Set drop-down selectedWert und aktualisieren Änderungen

$("#PR2DistrictId option[value='@Model.PR2DistrictId']").attr("selected", true).trigger("chosen:updated")

Hier setzen wir zuerst den Wert von Modelund aktualisieren ihn dann bei Auswahl

Deepak Tambe
quelle
0

// Html Format der Dropdown-Liste.

<select id="MyDropDownList">
<option value=test1 selected>test1</option>
<option value=test2>test2</option>
<option value=test3>test3</option>
<option value=test4>test4</option>

// Wenn Sie das ausgewählte Element mit Javascript in test2 ändern möchten. Probier diese. // setze die nächste Option, die du auswählen möchtest

var NewOprionValue = "Test2"

        var RemoveSelected = $("#MyDropDownList")[0].innerHTML.replace('selected', '');
        var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + 'selected>');
        $('#MyDropDownList').html(ChangeSelected);
Sikha
quelle
0

Die Verwendung der oben hervorgehobenen / markierten Antwort hat bei mir funktioniert ... hier ein kleiner Einblick. Ich habe ein wenig betrogen, als ich die URL erhalten habe, aber im Grunde definiere ich die URL im Javascript und setze sie dann über die jquery-Antwort von oben:

<select id="select" onChange="window.location.href=this.value">
    <option value="">Select a task </option>
    <option value="http://127.0.0.1:5000/choose_form/1">Task 1</option>
    <option value="http://127.0.0.1:5000/choose_form/2">Task 2</option>
    <option value="http://127.0.0.1:5000/choose_form/3">Task 3</option>
    <option value="http://127.0.0.1:5000/choose_form/4">Task 4</option>
    <option value="http://127.0.0.1:5000/choose_form/5">Task 5</option>
    <option value="http://127.0.0.1:5000/choose_form/6">Task 6</option>
    <option value="http://127.0.0.1:5000/choose_form/7">Task 7</option>
    <option value="http://127.0.0.1:5000/choose_form/8">Task 8</option>
</select>
<script>
    var pathArray = window.location.pathname.split( '/' );
    var selectedItem = "http://127.0.0.1:5000/" + pathArray[1] + "/" + pathArray[2];
    var trimmedItem = selectedItem.trim();
    $("#select").val(trimmedItem);
</script>

quelle
0

Verwenden Sie für Benutzer von Bootstrap $(#elementId').selectpicker('val','elementValue')anstelle von$('#elementId').val('elementValue') Benutzer , da letzterer den Wert in der Benutzeroberfläche nicht aktualisiert.

Hinweis : Sogar die .change()Funktion funktioniert, wie oben in einigen Antworten vorgeschlagen, löst jedoch die $('#elementId').change(function(){ //do something })Funktion aus.

Posten Sie dies einfach für Leute, die in Zukunft auf diesen Thread verweisen.

Tejas Joshi
quelle