Establecer el índice seleccionado de un menú desplegable usando jQuery


165

¿Cómo configuro el índice de un menú desplegable en jQuery si la forma en que encuentro el control es la siguiente:

$("*[id$='" + originalId + "']") 

Lo hago de esta manera porque estoy creando controles dinámicamente y dado que los identificadores se cambian cuando uso formularios web, encontré esto como una solución para encontrarme algunos controles. Pero una vez que tengo el objeto jQuery, no sé cómo establecer el índice seleccionado en 0 (cero).

Respuestas:


352

En primer lugar, ese selector es bastante lento. Escaneará cada elemento DOM buscando los identificadores. Será menos un éxito de rendimiento si puede asignar una clase al elemento.

$(".myselect")

Sin embargo, para responder a su pregunta, hay algunas maneras de cambiar el valor de los elementos seleccionados en jQuery

// sets selected index of a select box to the option with the value "0"
$("select#elem").val('0'); 

// sets selected index of a select box to the option with the value ""
$("select#elem").val(''); 

// sets selected index to first item using the DOM
$("select#elem")[0].selectedIndex = 0;

// sets selected index to first item using jQuery (can work on multiple elements)
$("select#elem").prop('selectedIndex', 0);

¿Hay una mejor manera de hacerlo? Pensé que escanearía todo el DOM para que coincida con la ID, pero como soy nuevo en jQuery, pensé, hagámoslo funcionar y luego veamos si hay una mejor manera de hacerlo. Cualquier consejo será apreciado.
oz.

Sí, si puede asignar una clase a los elementos que necesita encontrar, sería un selector mucho más rápido.
gnarf

@gnarf ¿no son las ID más rápidas?
KBN

#an-ides más rápido, pero *[id$=ends-with]es mucho más lento, eso es lo que significa "asignar una clase al elemento"
gnarf

¿Qué tal si tengo múltiples ASP.net DropDownList con diferente valor de índice seleccionado?
SearchForKnowledge

106

Acabo de encontrar esto, funciona para mí y personalmente me resulta más fácil de leer.

Esto establecerá el índice real al igual que la opción número 3 de la respuesta de gnarf.

// sets selected index of a select box the actual index of 0 
$("select#elem").attr('selectedIndex', 0);

Esto no solía funcionar, pero ahora sí ... ver error: http://dev.jquery.com/ticket/1474

Apéndice

Como se recomienda en los comentarios, use:

$("select#elem").prop('selectedIndex', 0);


30
Y a partir de jQuery 1.6 debería usar .prop('selectedIndex', 0);independientemente de si .attr()funciona o no :)
gnarf

1
Correcto, de hecho podría no funcionar en 1.7. ver la respuesta aceptada: stackoverflow.com/questions/8010664/…
4imble

+1 para el apéndice. Mi antiguo código se rompió debido a este problema
BiLaL

11

Escribo esta respuesta en 2015, y por alguna razón (probablemente versiones anteriores de jQuery) ninguna de las otras respuestas me ha funcionado. Quiero decir, cambian el índice seleccionado, pero en realidad no se refleja en el menú desplegable real.

Aquí hay otra forma de cambiar el índice y hacer que se refleje en el menú desplegable:

$('#mydropdown').val('first').change();

1
Gracias por tu respuesta. Solo esta respuesta me
funcionó

También en 2015, no tengo ningún problema con prop('selectedIndex', ...);(probado con Chrome y Firefox) cambiar la selección.
Lambart

2
Por lo que vale, debe señalarse que lo que está haciendo diferente aquí es desencadenar un changeevento en el menú desplegable, que también podría ser una solución / solución útil para las personas que están cambiando la selección llamando prop('selectedIndex', ...), en lugar de hacerlo val(...). Quizás el problema fue que estás escuchando un changeevento, ¿y ESO es lo que no te funcionó? Es cierto que simplemente cambiar el property no disparará ningún evento ...
Lambart

9

Estoy usando

$('#elem').val('xyz');

para seleccionar el elemento de opción que tiene valor = 'xyz'


9

Código JQuery:

$("#sel_status").prop('selectedIndex',1);

Código Jsp:

Status:
<select name="sel_status"
    id="sel_status">
    <option value="1">-Status-</option>
    <option>ALL</option>
    <option>SENT</option>
    <option>RECEIVED</option>
    <option>DEACTIVE</option>
</select>

3

Desea obtener el valor de la primera opción en el elemento de selección.

$("*[id$='" + originalId + "']").val($("*[id$='" + originalId + "'] option:first").attr('value'));

3

Para seleccionar la segunda opción

$('#your-select-box-id :nth-child(2)').prop('selected', true);

Aquí agregamos el 'disparador (' cambio ') para que el evento se active.

$('#your-select-box-id :nth-child(2)').prop('selected', true).trigger('change');

Esta es una respuesta mucho mejor.
Ben Dehghan

1
$("[id$='" + originalId + "']").val("0 index value");

lo configurará a 0


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.