Como definir a primeira opção em uma caixa de seleção usando o jQuery?

Eu tenho duas selectcaixas HTML . Preciso redefinir uma selectcaixa quando faço uma seleção em outra.

<select id="name" >
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name2" >
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

Quando seleciono uma opção do primeiro select(ou seja id="name"), preciso redefinir o segundo selectpara select all; Da mesma forma, quando seleciono uma opção do segundo select(ou seja id="name2"), preciso redefinir o primeiro selectpara select all.

Como eu posso fazer isso?

Algo assim deve funcionar: https://jsfiddle.net/TmJCE/898/

$('#name2').change(function(){
    $('#name').prop('selectedIndex',0);
});


$('#name').change(function(){
    $('#name2').prop('selectedIndex',0);
});

Se você deseja apenas redefinir o elemento de seleção para sua primeira posição, a maneira mais simples pode ser:

$('#name2').val('');

Para redefinir todos os elementos selecionados no documento:

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

EDIT: Para esclarecer de acordo com um comentário abaixo, isso redefine o elemento select para sua primeira entrada em branco e somente se existir uma entrada em branco na lista.

Conforme apontado por @PierredeLESPINAY nos comentários, minha solução original estava incorreta - redefiniria a lista suspensa para a opção superior, mas apenas porque o undefinedvalor de retorno resolvido para o índice 0.

Aqui está uma solução correta, que leva selectedem conta a propriedade:

$('#name').change(function(){
    $('#name2').val(function () {
        return $(this).find('option').filter(function () {
            return $(this).prop('defaultSelected');
        }).val();
    });
});

DEMO : http://jsfiddle.net/weg82/257/

Resposta original - INCORRETA

No jQuery 1.6+, você precisa usar o .propmétodo para obter a seleção padrão:

// Resets the name2 dropdown to its default value
$('#name2').val( $('#name2').prop('defaultSelected') );

Para redefinir dinamicamente quando o primeiro menu suspenso for alterado, use o .changeevento:

$('#name').change(function(){
  $('#name2').val( $('#name2').prop('defaultSelected') );
});

Use isso se desejar redefinir a seleção para a opção que possui o atributo "selecionado". Funciona de maneira semelhante à função JavaScript embutida de form.reset () para a seleção.

 $("#name").val($("#name option[selected]").val());

Isto me ajuda muito.

$(yourSelector).find('select option:eq(0)').prop('selected', true);

Aqui está como eu consegui que funcionasse se você apenas quisesse voltar para a sua primeira opção, por exemplo, "Escolha uma opção" "Select_id_wrap" é obviamente a div em torno da seleção, mas eu só quero deixar isso claro, caso isso ocorra. qualquer influência sobre como isso funciona. O meu redefine para uma função de clique, mas tenho certeza de que também funcionará dentro de uma alteração ...

$("#select_id_wrap").find("select option").prop("selected", false);

Use o código abaixo. Veja trabalhando aqui http://jsfiddle.net/usmanhalalit/3HPz4/

 $(function(){
     $('#name').change(function(){
         $('#name2 option[value=""]').attr('selected','selected');
     });

     $('#name2').change(function(){
         $('#name option[value=""]').attr('selected','selected');
     });
 });

Isso também pode ser usado

$('#name2').change(function(){
    $('#name').val('');//You can set the first value of first one if that is not empty
});


$('#name').change(function(){
    $('#name2').val('');
});

Essa é a maneira mais flexível / reutilizável de redefinir todas as caixas de seleção em seu formulário.

      var $form = $('form') // Replace with your form selector
      $('select', $form).each(function() {
        $(this).val($(this).prop('defaultSelected'));
      });

Veja como lidar com isso com um elemento de opção aleatória definido como o valor padrão (neste caso, o texto 2 é o padrão):

<select id="name2" >
   <option value="">select all</option>
   <option value="1">Text 1</option>
   <option value="2" selected="selected">Text 2</option>
   <option value="3">Text 3</option>
</select>
<script>
    $('#name2 option[selected]').prop('selected', true);
</script>

Você pode tentar isso:

$( 'select' ).each( function () {
    if ( $( this ).children().length > 0 ) {
        $( $( this ).children()[0] ).attr( 'selected', 'selected' );
        $( this ).change();
    }
} );

Ocorreu um problema ao usar a propriedade defaultSelected na resposta de @Jens Roland no jQuery v1.9.1. Uma maneira mais genérica (com muitas seleções dependentes) seria colocar um atributo padrão de dados nas suas seleções dependentes e, em seguida, iterá-las ao redefinir.

<select id="name0" >
    <option value="">reset</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name1" class="name" data-default="1">
    <option value="">select all</option>
    <option value="1" selected="true">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name2" class="name" data-default="2">
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2" selected="true">Text 2</option>
    <option value="3">Text 3</option>
</select>

E o javascript ...

$('#name0').change(function(){
    if($('#name0').val() == '') {
        $('select.name').each(function(index){
          $(this).val($(this).data('default'))  
        })
    } else {
      $('select.name').val($('#name0').val() );
    }
});

Veja http://jsfiddle.net/8hvqN/ para uma versão funcional do acima.

Criei uma nova opção na tag select que possui um valor de string vazia ("") e usei:

$("form.query").find('select#topic').val("");

Use jquery para vincular o evento onchange para selecionar, mas você não precisa criar outro $(this)objeto jquery.

$('select[name=name2]').change(function(){
    if (this.value) {
        console.log('option value = ', this.value);
        console.log('option text  = ', this.options[this.selectedIndex].text);

        // Reset selected
        this.selectedIndex = this.defaultSelected;
    }
});

Use este código para redefinir todos os campos de seleção para a opção padrão, onde o atributo selecionado é definido.

<select id="name1" >
    <option value="1">Text 1</option>
    <option value="2" selected="selected" >Default Text 2</option>
    <option value="3">Text 3</option>
</select>
<select id="name2" >
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3" selected="selected" >Default Text 3</option>
</select>
<script>
    $('select').each( function() {
        $(this).val( $(this).find("option[selected]").val() );
    });
</script>

Aqui está a melhor solução que estou usando. Isso se aplica a mais de 1 slectbox

$("select").change(function(){
    var thisval = $(this).val();
    $("select").prop('selectedIndex',0);
    $(this).val(thisval);
})

A opção 1 de configuração no elemento de seleção pode ser feita por esse segmento. Para mostrá-lo visualmente, você deve adicionar .trigger ('change') no final.

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