Come posso impostare il valore di un DropDownList usando jQuery?

Come dice la domanda, come posso impostare il valore di un controllo DropDownList usando jQuery?

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

assicurati solo che il valore nei tag delle opzioni corrisponda al valore nel metodo val.

Se lavori con l'indice puoi impostare l'indice selezionato direttamente con .attr ():

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

Questo lo imposterà sul primo valore nella lista a discesa.

Modifica: il modo in cui l'ho fatto sopra funzionava. Ma sembra che non lo faccia più.

Ma come sottolinea così piacevolmente Han nei commenti, il modo corretto per farlo è:

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

Come suggerito da @Nick Berardi, se il valore modificato non si riflette sul front-end dell'interfaccia utente, provare:

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

Prova questo approccio molto semplice:

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

Se il menu a discesa è il menu a discesa Asp.Net, il codice sottostante funzionerà correttamente,

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

Ma se DropDown è un menu a discesa HTML, questo codice funzionerà.

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

Migliore risposta alla domanda:

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

per esempio:

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

o

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

imposta il valore e aggiorna l' evento dell'elenco a discesa

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

Ci sono molti modi per farlo. Ecco qui alcuni di loro:

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

O

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

Penso che questo possa aiutare:

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

Se lo fai in questo modo, aggiungi un elemento senza testo. Quindi, quando si fa clic su combo, non viene visualizzato, ma il valore -1 è stato aggiunto in un secondo momento con $ (". AutoCompleteDepartment"). Val (-1); ti consente di controllare se la combo ha un valore valido.

Spero che aiuti qualcuno.

Mi scusi per il mio inglese.

Se devi solo impostare il valore di un menu a discesa, il modo migliore è

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

Se devi attivare uno script dopo aver aggiornato il valore del menu a discesa come Se hai impostato un evento onChange nel menu a discesa e desideri eseguirlo dopo aver aggiornato il menu a discesa di quanto devi utilizzare in questo modo

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

Ecco una funzione creata per impostare rapidamente l'opzione selezionata:

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

Chiamare questa funzione con id elemento argomento e valore selezionato; come questo:

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

È utile quando ci sono molte opzioni selezionate da impostare.

Nel caso in cui carichi tutto <options ....></options>con una chiamata Ajax,
segui questi passaggi per farlo.

1). Crea un metodo separato per impostare il valore del menu a discesa
Ad esempio:

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

2). Chiama questo metodo quando ajax chiama con successo tutte le attività di accodamento HTML completate

Per esempio:

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

Imposta il drop-down selectedvalore e aggiorna le modifiche

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

Qui impostiamo prima il valore da Modele poi lo aggiorniamo su scelto

// Formato HTML dell'elenco a discesa.

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

// Se si desidera modificare l'elemento selezionato in test2 utilizzando javascript. Prova questo. // imposta l'opzione successiva che desideri selezionare

var NewOprionValue = "Test2"

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

Utilizzando la risposta evidenziata / selezionata sopra ha funzionato per me ... ecco un po 'di intuizione. Ho tradito un po 'per ottenere l'URL, ma fondamentalmente sto definendo l'URL nel Javascript, e quindi impostandolo tramite la risposta jquery dall'alto:

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

Per le persone che utilizzano Bootstrap, utilizzare $(#elementId').selectpicker('val','elementValue')invece di $('#elementId').val('elementValue'), poiché quest'ultimo non aggiorna il valore nell'interfaccia utente.

Nota : anche la .change()funzione funziona, come suggerito sopra in alcune risposte, ma attiva la $('#elementId').change(function(){ //do something })funzione.

Pubblicando semplicemente questo post per le persone che fanno riferimento a questa discussione in futuro.