¿Cómo configurar la primera opción en un cuadro de selección usando jQuery?

Tengo dos selectcuadros HTML . Necesito restablecer un selectcuadro cuando hago una selección en otro.

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

Cuando selecciono una opción de la primera select(es decir id="name"), necesito restablecer la segunda selecta select all; de manera similar, cuando selecciono una opción de la segunda select(es decir id="name2"), necesito restablecer la primera selecta select all.

¿Cómo puedo hacer eso?

Algo como esto debería hacer el truco: https://jsfiddle.net/TmJCE/898/

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


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

Si solo desea restablecer el elemento de selección a su primera posición, la forma más simple puede ser:

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

Para restablecer todos los elementos seleccionados en el documento:

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

EDITAR: para aclarar según un comentario a continuación, esto restablece el elemento de selección a su primera entrada en blanco y solo si existe una entrada en blanco en la lista.

Como señaló @PierredeLESPINAY en los comentarios, mi solución original era incorrecta: restablecería el menú desplegable a la opción superior, pero solo porque el undefinedvalor de retorno se resolvió en el índice 0.

Aquí hay una solución correcta, que tiene selecteden cuenta la propiedad:

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

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

Respuesta original - INCORRECTA

En jQuery 1.6+ necesita usar el .propmétodo para obtener la selección predeterminada:

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

Para restablecerlo dinámicamente cuando cambie el primer menú desplegable, use el .changeevento:

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

Use esto si desea restablecer la selección a la opción que tiene el atributo "seleccionado". Funciona de manera similar a la función JavaScript incorporada form.reset () a la selección.

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

Esto me ayuda mucho.

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

Así es como lo hice funcionar si solo desea volver a su primera opción, por ejemplo, "Elegir una opción" "Select_id_wrap" es obviamente el div alrededor de la selección, pero solo quiero dejar eso en claro en caso de que haya alguna relación con cómo funciona esto. El mío se restablece a una función de clic, pero estoy seguro de que funcionará dentro de un cambio también ...

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

Usa el siguiente código. Véalo trabajando aquí http://jsfiddle.net/usmanhalalit/3HPz4/

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

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

Esto también se puede usar

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


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

Esta es la forma más flexible / reutilizable de restablecer todos los cuadros de selección en su formulario.

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

Aquí se explica cómo manejarlo con un elemento de opción aleatorio definido como el valor predeterminado (en este caso, el Texto 2 es el predeterminado):

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

Puedes probar esto:

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

Tuve un problema al usar la propiedad defaultSelected en la respuesta de @Jens Roland en jQuery v1.9.1. Una forma más genérica (con muchas selecciones dependientes) sería poner un atributo de datos por defecto en sus selecciones dependientes y luego iterar a través de ellas al restablecer.

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

Y el javascript ...

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

Consulte http://jsfiddle.net/8hvqN/ para obtener una versión funcional de lo anterior.

Creé una nueva opción en la etiqueta de selección que tiene un valor de cadena vacía ("") y usé:

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

Use jquery para vincular el evento onchange para seleccionar, pero no necesita crear otro $(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 restablecer todos los campos de selección a la opción predeterminada, donde se define el atributo seleccionado.

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

Aquí está la mejor solución que estoy usando. Esto aplicará para más de 1 slectbox

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

La configuración de la opción 1 en el elemento de selección se puede hacer por este segmento. Para mostrarlo visualmente, tiene tp add .trigger ('change') al final.

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