it-swarm.com.de

Wie kann ich den Wert einer DropDownList mit jQuery festlegen?

Wie die Frage sagt, wie setze ich den Wert eines DropDownList-Steuerelements mit jQuery?

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

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

575
Nick Berardi

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

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

Dadurch wird es auf den ersten Wert in der Dropdown-Liste gesetzt.

Edit: So wie ich es oben gemacht habe, hat es früher funktioniert. Aber es scheint nicht mehr so ​​zu sein.

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

$("#mydropdownlist").get(0).selectedIndex = index_here;
50
mattsson

Versuchen Sie, wie von @Nick Berardi vorgeschlagen, Folgendes:

$("#mydropdownlist").val("thevalue").change();
39
IRSHAD

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

Wenn Sie Asp.Net als Dropdown-Liste verwenden, funktioniert der folgende Code einwandfrei:

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

Handelt es sich bei Ihrem DropDown jedoch um HTML-Dropdown, funktioniert dieser Code.

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

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");
5
Asif Ramzan

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

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

OR

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

Versuch:

jQuery("#availability option:selected").val();

m den Text der Option zu erhalten, verwenden Sie text ():

jQuery("#availability option:selected").text();

Mehr Info:

 http://api.jquery.com/val/
 http://api.jquery.com/text/
$(document).ready(function(){ 
  $('#button1').click(function(){ 
    alert($('#combo :selected').text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />
1
Sangeet Shah

Ich denke, das könnte 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);                                       
              }  
             );

Auf diese Weise fügen Sie ein Element ohne Text hinzu. Wenn Sie 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); Sie können steuern, ob die Combo einen gültigen Wert hat.

Hoffe es hilft niemandem.

Entschuldigung für mein Englisch.

1
JapineJ

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 dem Argument element id und dem ausgewählten Wert auf. so was:

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

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

0
vishwakarma09

// 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 Objekt 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);
0
Sikha

Wert einstellen und aktualisieren Dropdown-Listenereignis

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

Stellen Sie den Wert drop-downselected ein und aktualisieren Sie die Änderungen

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

Hier setzen wir zuerst den Wert von Model und aktualisieren ihn dann auf den ausgewählten Wert

0
Deepak Tambe

Für den Fall, dass Sie alle <options ....></options> per Ajax-Aufruf laden
Befolgen Sie diese Schritte, um dies zu tun.

1). Erstellen Sie eine separate Methode zum Festlegen des Dropdown-Werts
Zum Beispiel:

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

2). Rufen Sie diese Methode auf, wenn der Ajax-Aufruf erfolgreich abgeschlossen ist

Zum Beispiel:

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

Die markierte/angekreuzte Antwort oben hat bei mir funktioniert ... hier ein kleiner Einblick. Ich habe ein bisschen geschummelt, als ich die URL erhalten habe, aber im Grunde definiere ich die URL in Javascript und setze sie dann über die Antwort jquery 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>
0
user9915877