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


349

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

Respuestas:


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

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


Tengo un validador de rango en una lista desplegable y estoy configurando el valor de la lista desplegable como lo describió anteriormente, pero el validador de rango sigue fallando y me dice que seleccione un valor (cuando el valor seleccionado está dentro del rango). Por favor vea mi pregunta stackoverflow.com/questions/3165033/…
James

21
Esto no dispara el evento "cambio".
AGamePlayer

44
Quería reiterar: asegúrese de tener el atributo "valor" establecido, o este método no funcionará. (Estaba ayudando a alguien que me mostró esto y me preguntaba por qué no estaba seleccionando a través del texto en la lista desplegable). Quería asegurarme de que estaba claro.
JasCav

1
+1 Tuve que llamar $("#mycontrolId").selectmenu('refresh');para reflejar los cambios
VladL

información detallada en este enlace htmlgoodies.com/beyond/javascript/…
Niamath

52

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;

77
Ahora, esto no funciona en absoluto porque la selectetiqueta no tiene ningún atributo nombrado selectedIndex. Es una propiedad del objeto DOM en su lugar. Por lo tanto, el código debe ser:$("#mydropdownlist").get(0).selectedIndex = index_here;
Han

55
$("#mydropdownlist").prop('selectedIndex', index_here); También funciona
numaroth

("#mydropdownlist"). get (0) .selectedIndex = index_here; de esta manera fue funciona !! @
kasim

Gran manera de cambiar seleccionado en el menú desplegable, Gracias
Avtandil Kavrelishvili

tengo la sensación de alguna agresión pasiva en la respuesta
Dheeraj

49

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

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

1
muchas gracias, solo una línea, ordenada y útil para aumentar también el evento change () de un SelectBox usando jQuery y Laravel Forms.
WhySoSerious

Esta es la única respuesta donde el cambio realmente se mostró en el menú desplegable. selectmenuno está definido en mi versión de jQuery, pero change()funciona.
Chad Hedgcock

Gracias. Esta fue la única forma en que funcionó para mí (después de intentar todo lo demás por encima de esto).
inspirado el

20

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

2
no olvides llamar$("#mycontrolId").selectmenu('refresh');
VladL

@VladL ¿Quieres decir $('#mycontrolId').selectmenu('refresh').val(myvalue).attr("selected", "selected");?
Dylan Czenski

9

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;

5

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

3

establecer valor y actualizar evento de lista desplegable

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

2

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

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

O

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

1
Su perfil indica que está asociado con el enlace que había incluido aquí. Vincular a algo con lo que está afiliado (por ejemplo, un producto o sitio web) sin revelar que la afiliación en su publicación se considera spam en Stack Exchange / Stack Overflow. Ver: ¿Qué significa "buena" autopromoción? , algunos consejos y sugerencias sobre autopromoción , ¿Cuál es la definición exacta de "spam" para Stack Overflow? y Qué hace que algo sea spam .
Makyen

1

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.


1

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

0

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.


0

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

0

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


0

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

0

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>

0

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.