¿Cómo puedo establecer el valor de un DropDownList usando jQuery?

Como dice la pregunta, ¿cómo configuro el valor de un control DropDownList usando jQuery?

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

solo asegúrese de que el valor en las etiquetas de opciones coincida con el valor en el método val.

Si trabaja con el índice, puede establecer el índice seleccionado directamente con .attr ():

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

Esto lo establecerá en el primer valor en la lista desplegable.

Editar: La forma en que lo hice anteriormente solía funcionar. Pero parece que ya no lo es.

Pero como Han señala tan agradablemente en los comentarios, la forma correcta de hacerlo es:

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

Según lo sugerido por @Nick Berardi, si su valor modificado no se refleja en la interfaz de usuario, intente:

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

Pruebe este enfoque muy simple:

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

Si su menú desplegable es Asp.Net desplegable, el siguiente código funcionará bien,

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

Pero si su DropDown es HTML desplegable, entonces este código funcionará.

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

La mejor respuesta para la pregunta:

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

p.ej:

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

o

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

establecer valor y actualizar evento de lista desplegable

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

Hay muchas formas de hacerlo. Éstos son algunos de ellos:

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

O

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

Creo que esto puede ayudar:

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

Si lo hace de esta manera, agrega un elemento sin texto. Entonces, cuando hace clic en de combo, no aparece, pero el valor -1 agregó una selección posterior con $ (". AutoCompleteDepartment"). Val (-1); le permite controlar si el combo tiene un valor válido.

Espero que ayude a alguien.

Lo siento por mi ingles.

Si solo necesita establecer el valor de un menú desplegable, entonces la mejor manera es

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

Si tiene que activar un script después de actualizar el valor desplegable, como si configura cualquier evento onChange en el menú desplegable y desea ejecutar esto después de actualizar el menú desplegable, entonces debe usarlo de esta manera

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

Aquí hay una función para configurar rápidamente la opción seleccionada:

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

Llame a esta función con el ID del elemento de argumento y el valor seleccionado; Me gusta esto:

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

Es útil cuando hay muchas opciones de selección para configurar.

En caso de que cargue todo <options ....></options>por llamada Ajax
Siga estos pasos para hacer esto.

1) Cree un método separado para establecer el valor del menú desplegable.
Por ejemplo:

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

2) Llame a este método cuando la llamada ajax se haya completado correctamente.

Por ej .:

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

Establecer drop-down selectedvalores y actualizar cambios

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

Aquí primero establecemos el valor Modely luego lo actualizamos en el elegido

// Formato HTML de la lista desplegable.

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

// Si quieres cambiar el elemento seleccionado a test2 usando javascript. Prueba este. // establece la siguiente opción que deseas seleccionar

var NewOprionValue = "Test2"

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

Usar la respuesta resaltada / marcada anterior funcionó para mí ... aquí hay una pequeña idea. Hice un poco de trampa al obtener la URL, pero básicamente estoy definiendo la URL en el Javascript y luego configurándola a través de la respuesta jquery de arriba:

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

Para las personas que usan Bootstrap, use en $(#elementId').selectpicker('val','elementValue')lugar de $('#elementId').val('elementValue'), ya que este último no actualiza el valor en la interfaz de usuario.

Nota : Incluso la .change()función funciona, como se sugirió anteriormente en algunas respuestas, pero activa la $('#elementId').change(function(){ //do something })función.

Simplemente publique esto para las personas que hagan referencia a este hilo en el futuro.