Como selecionar o primeiro elemento na lista suspensa usando jquery?

106

Eu quero saber como selecionar a primeira opção em todas as tags de seleção na minha página usando jquery.

tentei isso:

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

Mas não funcionou

javascript jquery html

— Amr Elgarhy
fonte

193

Experimente isso ...

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

Outra opção seria esta, mas só funcionará para uma lista suspensa de cada vez, conforme codificado abaixo:

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

Dê uma olhada neste post sobre como definir com base no valor. É interessante, mas não ajudará você neste problema específico:

Altere o valor selecionado de uma lista suspensa com jQuery

— RSolberg
fonte

apenas altere myID para selecionar como eu quero todas as tags selecionadas

— Amr Elgarhy

26

agora no jQuery você pode acessar as propriedades por meio do .prop()método. Portanto, você pode usar $("select").prop("selectedIndex",0);uma maneira rápida de selecionar a primeira opção em todos os menus suspensos.

— CBarr

3

Você sabe se isso irá disparar um evento de 'mudança' em todos os navegadores apenas definindo o atributo? Parece no Chrome, mas não testei extensivamente. Eu estava pensando em adicionar outro $('select').trigger('change');para o caso. Obrigado!

— Brian Armstrong

3

var myDDL = $('myID')deve ter hash no seletor para se tornarvar myDDL = $('#myID')

— user1069816

1

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

— Lorenzo Magon

13

Seu seletor está errado, você provavelmente estava procurando por

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

Isso também funcionará:

$('select option:first-child')

— Aistina
fonte

3

O índice seletor de nésimo filho do CSS começa em 1, não em 0

— Sergey

10

Uma solução alternativa para RSolgberg, que dispara o 'onchange'evento, se presente:

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

Como fazer a primeira opção de <selecionar> selecionada com jQuery?

— Muhammad Omar ElShourbagy
fonte

1

Isso funciona melhor do que a resposta aceita se você tiver que alterar a opção selecionada várias vezes. Por exemplo, se você filtrar suas opções e exibir parte delas.

— Guillaume Renoult

5

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

Para operações completas de lista suspensa usando Jquery

— vijay
fonte

O link agora está morto.

— Paul Gorbas de

4

O que você provavelmente quer é:

$("select option:first-child")

Que codigo

attr("selected", "selected");

está fazendo está definindo o atributo "selecionado" para "selecionado"

Se você quiser as opções selecionadas, independentemente de ser o primeiro filho, o seletor é:

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

— RichN
fonte

1

Substitua attrpor propse estiver usando jQuery 1.6+

— Jesan Fafon

2

Estou respondendo porque as respostas anteriores pararam de funcionar com a versão mais recente do jQuery. Não sei quando parou de funcionar, mas a documentação diz que .prop () tem sido o método preferido para obter / definir propriedades desde o jQuery 1.6.

É assim que eu fiz funcionar (com jQuery 3.2.1):

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

Estou usando knockoutjs e as ligações de alteração não estavam disparando com o código acima, então adicionei .change () ao final.

Aqui está o que eu precisava para minha solução:

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

Consulte as notas .prop () na documentação aqui: http://api.jquery.com/prop/

— Brandon
fonte

2

Aqui está uma javascriptsolução simples que funciona na maioria dos casos:

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

— Jagruti
fonte

1

se você deseja verificar o texto da opção selecionada, independentemente de ser o primeiro filho.

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

— Sarah
fonte

Me salvou uma segunda pesquisa. Isso é basicamente o que eu estava procurando, embora estivesse mais interessado em alterar o valor do que em verificar. $('#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
fonte