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

548

Como faço para selecionar a primeira opção com jQuery?

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>
AMD
fonte

Respostas:

956
$("#target").val($("#target option:first").val());
David Andres
fonte
364
Deve-se notar que isso é mais fácil com $ ("# target") [0] .selectedIndex = 0;
David Andres
17
Ele funciona, mas é baseado em 1º elemento de valor , se 1º elemento contém valor vazio, ele irá selecionar elemento mais próximo com o valor
evilReiko
2
Parece funcionar muito bem, exceto o IE6. Incerto de 7-8, funciona em 9.
Nicholi
3
Eu retrocedi minha declaração anterior, estava me adiantando. $ ("# target"). val ("opção: primeiro"); funciona quase todos os lugares, exceto o IE6 $ ("target"). val ($ ("# option option: first"). val ()); funcionará no IE6, porque você está literalmente procurando o primeiro valor e inserindo-o como valor do destino. Duas pesquisas de identificação em vez de uma.
Nicholi
2
E é realmente necessário para o IE6, 7 e 8. Considerando que .val ('opção: primeiro') funciona no IE9 (e Safari e Firefox e Chrome e Opera).
Nicholi
178

Você pode tentar isso

$("#target").prop("selectedIndex", 0);
Esben
fonte
2
Isso não funciona corretamente em todos os casos. Eu tenho um pai / filho em cascata suspensos. Selecione o pai nº 1, o filho nº 1, selecione o pai nº 2 o filho nº 2. Sempre que eles selecionam um novo pai, ele deve definir o filho correspondente de volta para a primeira opção. Esta solução não faz isso. Ele deixa o menu filho "pegajoso". Consulte a solução option.prop ('selected', false) / option: first.prop ('selected', 'selected') nesta pergunta para obter a resposta que funciona em mais cenários.
Lance Cleveland
isso não aciona o evento onChange. Pelo menos em cromo.
Tomasz Mularczyk
Obrigado! Esta é a primeira resposta na lista de respostas que funcionou para mim.
Casey Crookston
6
@Tomasz$("#target").prop("selectedIndex", 0).change();
mplungjan
@Romesh como posso definir a base selectedIndex no valor?
Junior Frogie
111
// remove "selected" from any options that might already be selected
$('#target option[selected="selected"]').each(
    function() {
        $(this).removeAttr('selected');
    }
);


// mark the first option as selected
$("#target option:first").attr('selected','selected');
user149513
fonte
1
Boa segunda abordagem. Por favor, adicione o valor do atributo selecionado. Por exemplo, attr ("selecionado", "selecionado"). Sem esse parâmetro extra, a seleção não é feita.
David Andres
@ EggPavlikhin - Acabei de editar a resposta para incluir o código JQuery para remover o sinalizador "selecionado" de qualquer opção que já possa ter sido selecionada. Agora a resposta é :) correta
jmort253
20
Não há necessidade da eachfunção, deve ser: $('#target option[selected="selected"]').removeAttr('selected')também agora deve ser usada com removePrope em propvez disso.
vsync
Uma versão mais completa da resposta de James Lee Baker em outra parte desta questão, embora adicione ciclos de computação que podem não ser necessários se a interface for bem gerenciada.
Lance Cleveland
65

Quando você usa

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

isso não funcionará no Chrome e Safari se o valor da primeira opção for nulo.

eu prefiro

$("#target option:first").attr('selected','selected');

porque pode funcionar em todos os navegadores.

Jimmy Huang
fonte
3
Você também precisa "desmarcar" qualquer elemento selecionado anteriormente para que isso funcione em mais casos. Veja a resposta de James Lee Baker para obter detalhes.
Lance Cleveland
44

Alterar o valor da entrada de seleção ou ajustar o atributo selecionado pode substituir a propriedade padrão selectedOptions do elemento DOM, resultando em um elemento que pode não ser redefinido corretamente em um formulário ao qual o evento de redefinição foi chamado.

Use o método prop do jQuery para limpar e definir a opção necessária:

$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");
James Lee Baker
fonte
3
Perfeito. Tenho menus suspensos em cascata. Quando um usuário seleciona a opção pai 2 e a opção filho 3, não quero que isso "fique". Em outras palavras, o usuário seleciona o pai nº 1 e, em seguida, seleciona novamente o pai nº 2. Quando isso acontece, quero que o menu filho seja redefinido para a primeira opção (que é "Qualquer" no meu caso). Todas as outras soluções aqui falham no Firefox v19 e Chrome no Linux.
Lance Cleveland
33
$("#target")[0].selectedIndex = 0;
danativo
fonte
1
Isso não funcionará nos casos em que um menu suspenso tiver um item pré-selecionado. Veja meus comentários sobre a resposta selecionada para obter detalhes.
Lance Cleveland
21

Um ponto sutil que acho que descobri sobre as principais respostas votadas é que, embora elas alterem corretamente o valor selecionado, elas não atualizam o elemento que o usuário vê (somente quando clicarem no widget, elas verão uma verificação ao lado do elemento atualizado).

O encadeamento de uma chamada .change () até o final também atualizará o widget da interface do usuário.

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

(Observe que notei isso ao usar o jQuery Mobile e uma caixa na área de trabalho do Chrome, portanto, esse pode não ser o caso em todos os lugares).

Bradley Bossard
fonte
O encadeamento de uma chamada .change () até o final também atualizará o widget da interface do usuário.
Codemirror
17

Se você desativou as opções, pode não adicionar ([desativado]) para impedir a seleção delas, o que resulta no seguinte:

$("#target option:not([disabled]):first").attr('selected','selected')
Melanie
fonte
1
Bom argumento sobre as opções desativadas. Boa adição às respostas apresentadas!
Lance Cleveland
16

Outra maneira de redefinir os valores (para vários elementos selecionados) poderia ser esta:

$("selector").each(function(){

    /*Perform any check and validation if needed for each item */

    /*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */

    this.selectedIndex=0;

});
Nick Petropoulos
fonte
4
+1 é na verdade uma boa resposta, mas você poderia torná-la mais específica ao domínio da pergunta; em vez de $("selector")você poderia ter escrito$('#target')
Ja͢ck
7

Simples assim:

$('#target option:first').prop('selected', true);
Ramon Schmidt
fonte
1
isso é muito melhor
Arun Prasad ES
7
$('#newType option:first').prop('selected', true);
FFFFFF
fonte
Isso funciona apenas se ainda não houver opções selecionadas. Veja a resposta de James Lee Baker.
Webars
6

Descobri que apenas a configuração de attr selected não funciona se já houver um atributo selecionado. O código que eu uso agora desabilita primeiro o atributo selecionado e depois seleciona a primeira opção.

$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');
Francis Lewis
fonte
Isso funciona bem e é muito semelhante à resposta de James Lee Baker, citada em outra parte desta questão. Gosto da outra resposta com a opção: selected e option: first como a execução da opção: first provavelmente será mais rápida (em termos de computação) do que find ().
Lance Cleveland
5

Embora a função each provavelmente não seja necessária ...

$('select').each(function(){
    $(this).find('option:first').prop('selected', 'selected');
});

funciona para mim.

Darth Jon
fonte
5

Aqui está como eu faria isso:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');
Fabrizio
fonte
1
Isso funciona bem e é muito semelhante à resposta de James Lee Baker, citada em outra parte desta questão. Gosto da outra resposta com a opção: selected e option: first como a execução da opção: first provavelmente será mais rápida (em termos de computação) do que find ().
Lance Cleveland
2

Só funcionou para mim usando um gatilho ('change') no final, assim:

$("#target option:first").attr('selected','selected').trigger('change');
Pablo SG Pacheco
fonte
2

Se você usar a primeira opção como padrão, como

<select>
    <option value="">Please select an option below</option>
    ...

então você pode apenas usar:

$('select').val('');

É simples e agradável.

Gary - ITB
fonte
2

Isso funcionou para mim!

$("#target").prop("selectedIndex", 0);
Archana Kamath
fonte
1

Na parte de trás da resposta de James Lee Baker, prefiro esta solução, pois elimina a dependência do suporte do navegador para: first: selected ...

$('#target').children().prop('selected', false);
$($('#target').children()[0]).prop('selected', 'selected');
Matthew Scott
fonte
1

Para mim, só funcionou quando adicionei o seguinte código:

.change();

Para mim, só funcionou quando adicionei o seguinte código: Como queria "redefinir" o formulário, ou seja, selecione todas as primeiras opções de todas as seleções do formulário, usei o seguinte código:

$('form').find('select').each(function(){ $(this).val($("select option:first").val()); $(this).change(); });

Jean Douglas
fonte
1

Usar:

$("#selectbox option:first").val()

Por favor, encontre o trabalho simples neste JSFiddle .

Chetan
fonte
Que tal as posições 15, 25 ou com texto específico? : D
Marcelo Agimóvel
Chamar .val()apenas obtém o valor da primeira opção na lista. Na verdade, ele não seleciona (torna selecionado) a primeira opção, como foi solicitado na pergunta original.
Funka
1

Para mim, só funcionou quando adicionei a seguinte linha de código

$('#target').val($('#target').find("option:first").val());
Muhammad Qasim
fonte
0
$("#target").val(null);

funcionou bem em cromo

Krishna Murthy
fonte
0

Se você estiver armazenando o objeto jQuery do elemento select:

var jQuerySelectObject = $("...");

...

jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());
Daniel
fonte
0

Verifique esta melhor abordagem usando jQuery com ECMAScript 6 :

$('select').each((i, item) => {
  var $item = $(item);
  $item.val($item.find('option:first').val()); 
});
jdnichollsc
fonte
0

Você pode selecionar qualquer opção dropdownusando-a.

// 'N' can by any number of option.  // e.g.,  N=1 for first option
$("#DropDownId").val($("#DropDownId option:eq(N-1)").val()); 
Arsman Ahmad
fonte
0

$('select#id').val($('#id option')[index].value)

Substitua o ID por um ID de tag de seleção específico e indexe pelo elemento específico que você deseja selecionar.

ie

<select class="input-field" multiple="multiple" id="ddlState" name="ddlState">
                                        <option value="AB">AB</option>
                                        <option value="AK">AK</option>
                                        <option value="AL">AL</option>
</select>

Então, aqui para a seleção do primeiro elemento, usarei o seguinte código:

$('select#ddlState').val($('#ddlState option')[0].value)
Hitesh Kalwani
fonte
-1

Usar:

alert($( "#target option:first" ).text());
GobsYats
fonte