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

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

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

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

Você pode tentar isso

$("#target").prop("selectedIndex", 0);

// 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');

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.

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");

$("#target")[0].selectedIndex = 0;

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).

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')

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;

});

Simples assim:

$('#target option:first').prop('selected', true);

$('#newType option:first').prop('selected', true);

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');

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

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

funciona para mim.

Aqui está como eu faria isso:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');

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

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

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.

Isso funcionou para mim!

$("#target").prop("selectedIndex", 0);

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');

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(); });

Usar:

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

Por favor, encontre o trabalho simples neste JSFiddle .

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

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

$("#target").val(null);

funcionou bem em cromo

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

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

...

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

Verifique esta melhor abordagem usando jQuery com ECMAScript 6 :

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

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()); 

$('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)

Usar:

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