¿Cómo seleccionar el primer elemento en el menú desplegable usando jquery?

106

Quiero saber cómo seleccionar la primera opción en todas las etiquetas de selección en mi página usando jquery.

intenté esto:

$('select option:nth(0)').attr("selected", "selected");

Pero no funcionó

javascript jquery html

— Amr Elgarhy
fuente

193

Probar esto...

$('select option:first-child').attr("selected", "selected");

Otra opción sería esta, pero solo funcionará para una lista desplegable a la vez, como se codifica a continuación:

var myDDL = $('myID');
myDDL[0].selectedIndex = 0;

Eche un vistazo a esta publicación sobre cómo establecer en función del valor, es interesante pero no lo ayudará para este problema específico:

Cambiar el valor seleccionado de una lista desplegable con jQuery

— RSolberg
fuente

simplemente cambie myID para seleccionar como quiero todas las etiquetas seleccionadas

— Amr Elgarhy

26

ahora en jQuery puede acceder a las propiedades a través del .prop()método. Por lo tanto, podría usar $("select").prop("selectedIndex",0);una forma rápida de seleccionar la primera opción en todos los menús desplegables.

— CBarr

3

¿Sabe si esto activará un evento de 'cambio' en todos los navegadores simplemente configurando el atributo? Parece estar en Chrome, pero no lo he probado extensamente. Estaba pensando en agregar otro por $('select').trigger('change');si acaso. ¡Gracias!

— Brian Armstrong

3

var myDDL = $('myID')debe tener hash en el selector para convertirse envar myDDL = $('#myID')

— user1069816

1

Este método funciona bien para mí:$('select option').first().prop('selected',true);

— Lorenzo Magon

13

Tu selector es incorrecto, probablemente estabas buscando

$('select option:nth-child(1)')

Esto también funcionará:

$('select option:first-child')

— Aistina
fuente

3

El índice del selector CSS nth-child comienza en 1, no 0

— Sergey

10

Solución alternativa de Ana para RSolgberg, que activa el 'onchange'evento si está presente:

$("#target").val($("#target option:first").val());

¿Cómo hacer que la primera opción de <seleccionar> se seleccione con jQuery?

— Muhammad Omar ElShourbagy
fuente

1

Esto funciona mejor que la respuesta aceptada si tiene que cambiar la opción seleccionada varias veces. Por ejemplo, si filtra sus opciones y muestra parte de ellas.

— Guillaume Renoult

5

$("#DDLID").val( $("#DDLID option:first-child").val() );

Para operaciones de lista desplegable completas usando Jquery

— vijay
fuente

El enlace ahora está muerto.

— Paul Gorbas

4

Probablemente lo que quieras es:

$("select option:first-child")

Que este codigo

attr("selected", "selected");

lo que está haciendo es establecer el atributo "seleccionado" en "seleccionado"

Si desea las opciones seleccionadas, independientemente de si es el primer hijo, el selector es:

$("select").children("[selected]")

— RichN
fuente

1

Reemplace attrcon propsi está usando jQuery 1.6+

— Jesan Fafon

2

Respondo porque las respuestas anteriores han dejado de funcionar con la última versión de jQuery. No sé cuándo dejó de funcionar, pero la documentación dice que .prop () ha sido el método preferido para obtener / establecer propiedades desde jQuery 1.6.

Así es como lo hice funcionar (con jQuery 3.2.1):

$('select option:nth-child(1)').prop("selected", true);

Estoy usando knockoutjs y los enlaces de cambio no se estaban activando con el código anterior, así que agregué .change () al final.

Esto es lo que necesitaba para mi solución:

$('select option:nth-child(1)').prop("selected", true).change();

Consulte las notas .prop () en la documentación aquí: http://api.jquery.com/prop/

— Brandon
fuente

2

Aquí hay una javascriptsolución simple que funciona en la mayoría de los casos:

document.getElementById("selectId").selectedIndex = "0";

— Jagruti
fuente

1

si desea verificar el texto de la opción seleccionada independientemente de si es el primer hijo.

var a = $("#select_id option:selected").text();
alert(a); //check if the value is correct.
if(a == "value") {-- execute code --}

— Sarah
fuente

Me salvó una segunda búsqueda. Esto es más o menos lo que estaba buscando, aunque estaba más interesado en cambiar el valor que en verificarlo. $('#myID option:selected').text('NEW STRING');

— Ricky Payne

1

    var arr_select_val=[];

    $("select").each(function() { 
        var name=this.name;
            arr_select_val[name]=$('select option:first-child').val();
    });


// Process the array object
     $('.orders_status_summary_div').print(arr_select_val);

— ShivarajRH
fuente