Wie kann ich den Wert einer DropDownList mit jQuery festlegen?

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

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

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

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;

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

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

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;

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

Wert festlegen und Dropdown-Listenereignis aktualisieren

$("#id").val("1234").change();

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

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

ODER

$('select').prop('selectedIndex', 3);

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.

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

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.

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

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

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

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>

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.