Cambiar el valor seleccionado de una lista desplegable con jQuery

Tengo una lista desplegable con valores conocidos. Lo que estoy tratando de hacer es configurar la lista desplegable en un valor particular que sé que existe usando jQuery. Usando regular JavaScript, Haría algo como:

ddl = document.getElementById("ID of element goes here");
ddl.value = 2; // 2 being the value I want to set it too.

Sin embargo, necesito hacer esto con jQuery, porque estoy usando un CO clase para mi selector (estúpido ASP.NET ID de cliente ...).

Aquí hay algunas cosas que he probado:

$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.

¿Cómo puedo hacerlo con jQuery?


Noticias

Entonces, resultó que lo hice bien la primera vez con:

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

Cuando coloco una alerta justo encima, funciona bien, pero cuando elimino la alerta y la dejo funcionar a toda velocidad, aparece el error.

No se pudo establecer la propiedad seleccionada. Índice inválido

No estoy seguro si es un error con jQuery o Internet Explorer 6 (Supongo que internet Explorador 6), pero es terriblemente molesto.

preguntado el 31 de enero de 09 a las 20:01

El problema aquí terminó siendo un problema con IE6. Estaba creando nuevos elementos de opción para el elemento de selección y luego tratando de establecer el valor en uno de esos elementos de opción recién creados. IE6 espera incorrectamente hasta que haya recuperado el control de un script para crear realmente los nuevos elementos en el DOM, de manera que lo que estaba sucediendo efectivamente es que estaba tratando de configurar las listas desplegables para opciones que aún no existían, aunque deberían haberlo hecho. -

podrías usar javascript puro dd1 = document.getElementsByClassName('classname here'); dd1.value = 2; -

17 Respuestas

documentación de jQuery establece lo siguiente:

[jQuery.val] cheques, o selecciona, todos los botones de opción, casillas de verificación y opciones de selección que coincidan con el conjunto de valores.

Este comportamiento está en jQuery versiones 1.2 y por encima.

Lo más probable es que desee esto:

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

respondido 02 mar '16, 13:03

¿Funciona esto si el select Está oculto (display: none;)? No puedo hacer que funcione bien ... - padel

Esto me salvó de escribir cosas como $('._statusDDL [value="2"]').attr('selected',true); ¡Gracias! - Basilio

@Nordes que sería el caso si se obtiene el valor seleccionado. En este caso, está configurando el valor seleccionado, o más exactamente, configurando la opción seleccionada. - Jon P

@JL: Necesitas agregar .change() para ver la opción en el frontend de la lista desplegable, es decir $('#myID').val(3).change(); - Avatar

Se debe agregar el encadenamiento de .change () a la respuesta. Pensé que me estaba volviendo loco con esta solución que no funcionaba hasta que leí los comentarios. - David Baucum

Con campo oculto necesitas usar así:

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

or

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

Respondido 09 Oct 12, 14:10

¿Podría explicar por qué necesita activar un evento de cambio para campos ocultos? - Samuel

@Samuel: porque si cambia la opción seleccionada de una selección con jQuery, el cambio no se activa, por lo que se requiere un disparador manual. - machineaddict

Si necesita que se active un evento de cambio después de cambiar el valor del cuadro desplegable, debe llamar a la función de cambio después de establecer el valor. - tver3305

Necesitaba específicamente que se activara el evento de cambio, por lo que esto fue de gran ayuda para mí: Rohan

la mayoría de las respuestas repiten la misma historia, la solución clave para mí fue el cambio. wow, el cambio hizo mi día 😂🤣😀. - maytham-ɯɐɥʇʎɐɯ

Solo un FYI, no necesita usar clases CSS para lograr esto.

Puede escribir la siguiente línea de código para obtener el nombre de control correcto en el cliente:

$("#<%= statusDDL.ClientID %>").val("2");

ASP.NET representará el ID de control correctamente dentro de jQuery.

Respondido 21 Abr '09, 06:04

Eso solo funciona cuando su javascript está dentro del marcado .aspx o .ascx y no cuando está en el archivo .js como fue el caso aquí. Además, dependiendo de qué tan profundos estén anidados sus controles en su aplicación (en mi caso, tenían aproximadamente 10 niveles de profundidad), el ClientID puede ser increíblemente largo y, de hecho, puede agregar una hinchazón significativa al tamaño de su javascript si se usa demasiado liberalmente. Intento mantener mi marcado lo más pequeño posible, si puedo. - Phairoh

@ y0mbo Pero incluso si se cambia a MVC, aún debe usar archivos .JS externos para su JavaScript para que los navegadores y servidores proxy puedan almacenarlo en caché para mejorar el rendimiento. - 7wp

@Roberto, pero MVC no usa las estúpidas convenciones de nomenclatura que hace asp.net webforms, por lo que puede hacer referencia cómodamente en un archivo js externo a los controles que necesita. - lloydphillips

Si crea un javascript estilo OO, puede pasar sus ID de cliente al constructor de su objeto. El código del objeto está contenido en un archivo js externo, pero lo crea una instancia desde su código aspx. - mikesigs

Preferiría establecer ClientIDMode = "Static" en los controles asp para que sepa que la ID será la que especificó. Sin embargo, debe tener cuidado si luego coloca ese control en un repetidor. msdn.microsoft.com/en-us/library/… - Shawson

Solo prueba con

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

y no con

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

contestado el 14 de mayo de 13 a las 13:05

Estas soluciones parecen asumir que cada elemento de sus listas desplegables tiene un val () valor relacionado con su posición en la lista desplegable.

Las cosas se complican un poco más si este no es el caso.

A leer el índice seleccionado de una lista desplegable, usaría esto:

$("#dropDownList").prop("selectedIndex");

A planificadas el índice seleccionado de una lista desplegable, usaría esto:

$("#dropDownList").prop("selectedIndex", 1);

Tenga en cuenta que apuntalar() La función requiere JQuery v1.6 o posterior.

Veamos cómo usarías estas dos funciones.

Supongamos que tiene una lista desplegable de nombres de meses.

<select id="listOfMonths">
  <option id="JAN">January</option>
  <option id="FEB">February</option>
  <option id="MAR">March</option>
</select>

Puede agregar un botón "Mes anterior" y "Mes siguiente", que mira el elemento de la lista desplegable actualmente seleccionado y lo cambia al mes anterior / siguiente:

<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />

Y aquí está el JavaScript que ejecutarían estos botones:

function btnPrevMonth_Click() {
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    if (selectedIndex > 0) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex - 1);
    }
}
function btnNextMonth_Click() {
    //  Note:  the JQuery "prop" function requires JQuery v1.6 or later
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    var itemsInDropDownList = $("#listOfMonths option").length;

    //  If we're not already selecting the last item in the drop down list, then increment the SelectedIndex
    if (selectedIndex < (itemsInDropDownList - 1)) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex + 1);
    }
}

Mi sitio también es útil para mostrar cómo completar una lista desplegable con datos JSON:

http://mikesknowledgebase.com/pages/Services/WebServices-Page8.htm

Respondido 25 ago 20, 19:08

Después de buscar algunas soluciones, esto funcionó para mí.

Tengo una lista desplegable con algunos valores y quiero seleccionar el mismo valor de otra lista desplegable ... Así que primero pongo en una variable el selectIndex de mi primer menú desplegable.

var indiceDatos = $('#myidddl')[0].selectedIndex;

Luego, selecciono ese índice en mi segunda lista desplegable.

$('#myidddl2')[0].selectedIndex = indiceDatos;

Nota:

Supongo que esta es la solución más corta, confiable, general y elegante.

Porque en mi caso, estoy usando el atributo de datos de la opción seleccionada en lugar del atributo de valor. Entonces, si no tiene un valor único para cada opción, ¡el método anterior es el más corto y dulce!

Respondido 04 Abr '13, 09:04

Esta es la respuesta correcta, y todos los que no dijeron 'selectedIndex' instantáneamente, deberían saberlo mejor. Hurra DOM API y las personas que lo escribieron en la edad de piedra. - vsync

Sé que esta es una pregunta antigua y las soluciones anteriores funcionan bien, excepto en algunos casos.

Como

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

Por lo tanto, el elemento 4 se mostrará como "Seleccionado" en el navegador y ahora desea cambiar el valor a 3 y mostrar "Elemento3" como seleccionado en lugar de Elemento4. De acuerdo con las soluciones anteriores, si utiliza

jQuery("#select_selector").val(3);

Verá que el elemento 3 está seleccionado en el navegador. Pero cuando procesa los datos en php o asp, encontrará el valor seleccionado como "4". La razón es que su html se verá así.

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3" selected="selected">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

y obtiene el último valor como "4" en el lenguaje del lado del servidor.

ASÍ QUE MI SOLUCIÓN FINAL AL ​​RESPECTO

newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');  

EDITAR: Agregue comillas simples alrededor de "+ newselectedIndex +" para que se pueda usar la misma funcionalidad para valores no numéricos.

Entonces, lo que hago es, en realidad, eliminar el atributo seleccionado y luego hacer el nuevo como seleccionado.

Agradecería comentarios sobre esto de programadores senior como @strager, @ y0mbo, @ISIK y otros

Respondido 19 Feb 15, 02:02

Si tenemos un menú desplegable con un título de "Clasificación de datos":

<select title="Data Classification">
    <option value="Top Secret">Top Secret</option>
    <option value="Secret">Secret</option>
    <option value="Confidential">Confidential</option>
</select>

Podemos meterlo en una variable:

var dataClsField = $('select[title="Data Classification"]');

Luego ponga en otra variable el valor que queremos que tenga el menú desplegable:

var myValue = "Top Secret";  // this would have been "2" in your example

Entonces podemos usar el campo que pusimos en dataClsField, haz un hallazgo para myValue y hazlo seleccionado usando .prop():

dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected');

O puedes usar .val(), pero tu selector de . solo se puede usar si coincide con una clase en el menú desplegable, y debe usar comillas en el valor dentro del paréntesis, o simplemente usar la variable que establecimos anteriormente:

dataClsField.val(myValue);

Respondido 17 Oct 15, 00:10

Así que lo cambié para que ahora se ejecute después de 300 milisegundos usando setTimeout. Parece estar funcionando ahora.

Me he encontrado con esto muchas veces al cargar datos de una llamada Ajax. Yo también uso .NET, y se necesita tiempo para ajustarme al clientId cuando utilizo el selector jQuery. Para corregir el problema que está teniendo y evitar tener que agregar un setTimeout propiedad, simplemente puede poner "async: false"en la llamada Ajax, y le dará al DOM suficiente tiempo para recuperar los objetos que está agregando a la selección. Una pequeña muestra a continuación:

$.ajax({
    type: "POST",
    url: document.URL + '/PageList',
    data: "{}",
    async: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        var pages = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

        $('#locPage' + locId).find('option').remove();

        $.each(pages, function () {
            $('#locPage' + locId).append(
                $('<option></option>').val(this.PageId).html(this.Name)
            );
        });
    }
});

Respondido 24 Jul 11, 00:07

Utilizo una función de extensión para obtener los identificadores de los clientes, así:

$.extend({
    clientID: function(id) {
        return $("[id$='" + id + "']");
    }
});

Entonces puede llamar a los controles ASP.NET en jQuery de esta manera:

$.clientID("_statusDDL")

Respondido 24 Jul 11, 00:07

Otra opción es establecer el parámetro de control ClientID = "Static" en .net y luego puede acceder al objeto en JQuery por el ID que establezca.

respondido 12 mar '12, 19:03

<asp:DropDownList id="MyDropDown" runat="server" />

Utilizan $("select[name$='MyDropDown']").val().

contestado el 14 de mayo de 13 a las 13:05

Si está haciendo coincidir el nombre, también puede eliminar el $ así que es una coincidencia completa, no 'termina con'. Pero su sugerencia probablemente sea más rápida que solo hacer coincidir un nombre de clase. Incluso más rápido, aunque sería element.classname or #idname. - Alec

Solo una nota: he estado usando selectores de comodines en jQuery para tomar elementos que están ofuscados por las ID de cliente ASP.NET; esto también podría ayudarlo:

<asp:DropDownList id="MyDropDown" runat="server" />

$("[id* = 'MyDropDown']").append("<option value='-1'>&nbsp;</option>"); //etc

Tenga en cuenta el id * comodín: esto encontrará su elemento incluso si el nombre es "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown"

Respondido 27 Feb 21, 02:02

¿Cómo está cargando los valores en la lista desplegable o determinando qué valor seleccionar? Si está haciendo esto usando Ajax, entonces la razón por la que necesita el retraso antes de que ocurra la selección podría ser porque los valores no se cargaron en el momento en que se ejecutó la línea en cuestión. Esto también explicaría por qué funcionó cuando puso una declaración de alerta en la línea antes de establecer el estado, ya que la acción de alerta daría un retraso suficiente para que se carguen los datos.

Si está utilizando uno de los métodos Ajax de jQuery, puede especificar una función de devolución de llamada y luego poner $("._statusDDL").val(2); en su función de devolución de llamada.

Esta sería una forma más confiable de manejar el problema, ya que podría estar seguro de que el método se ejecutó cuando los datos estaban listos, incluso si tomó más de 300 ms.

contestado el 25 de mayo de 11 a las 12:05

<asp:DropDownList ID="DropUserType" ClientIDMode="Static" runat="server">
     <asp:ListItem Value="1" Text="aaa"></asp:ListItem>
     <asp:ListItem Value="2" Text="bbb"></asp:ListItem>
</asp:DropDownList>

ClientIDMode = "Estático"

$('#DropUserType').val('1');

Respondido el 05 de enero de 15 a las 09:01

En mi caso, pude hacerlo funcionar usando el método .attr ().

$("._statusDDL").attr("selected", "");

Respondido el 18 de Septiembre de 18 a las 21:09

JS puro

Para navegadores modernos el uso de selectores CSS no es un problema para JS puro

document.querySelector('._statusDDL').value = 2;

function change() {
  document.querySelector('._statusDDL').value = 2;
}
<select class="_statusDDL">
  <option value="1" selected>A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>

<button onclick="change()">Change</button>

Respondido el 26 de junio de 20 a las 23:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.