Come impostare la prima opzione su una casella di selezione usando jQuery?

Ho due selectcaselle HTML . Devo ripristinare una selectcasella quando faccio una selezione in un'altra.

<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 seleziono un'opzione del primo select(cioè id="name"), devo reimpostare il secondo selectsu select all; allo stesso modo, quando seleziono un'opzione del secondo select(cioè id="name2"), devo reimpostare il primo selectsu select all.

Come lo posso fare?

Qualcosa del genere dovrebbe fare il trucco: https://jsfiddle.net/TmJCE/898/

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


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

Se vuoi solo ripristinare l'elemento select nella sua prima posizione, il modo più semplice potrebbe essere:

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

Per ripristinare tutti gli elementi selezionati nel documento:

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

EDIT: per chiarire come da un commento qui sotto, questo reimposta l'elemento select alla sua prima voce vuota e solo se esiste una voce vuota nell'elenco.

Come sottolineato da @PierredeLESPINAY nei commenti, la mia soluzione originale non era corretta: ripristinava il menu a discesa sull'opzione più in alto, ma solo perché il undefinedvalore restituito si risolveva nell'indice 0.

Ecco una soluzione corretta, che tiene selectedconto della proprietà:

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

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

Risposta originale - INCORRETTA

In jQuery 1.6+ è necessario utilizzare il .propmetodo per ottenere la selezione predefinita:

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

Per ripristinarlo in modo dinamico quando cambia il primo menu a discesa, utilizzare l' .changeevento:

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

Utilizzare questo se si desidera ripristinare la selezione sull'opzione che ha l'attributo "selezionato". Funziona in modo simile alla funzione javascript incorporata form.reset () per la selezione.

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

Questo mi aiuta molto.

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

Ecco come l'ho fatto funzionare se vuoi solo riportarlo alla tua prima opzione, ad esempio "Scegli un'opzione" "Select_id_wrap" è ovviamente il div attorno alla selezione, ma voglio solo chiarirlo nel caso in cui abbia qualsiasi influenza su come funziona. Il mio si reimposta su una funzione clic, ma sono sicuro che funzionerà anche all'interno di una modifica ...

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

Usa il codice qui sotto. Guardalo funzionare qui http://jsfiddle.net/usmanhalalit/3HPz4/

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

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

Questo può anche essere usato

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


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

Questo è il modo più flessibile / riutilizzabile per ripristinare tutte le caselle selezionate nel modulo.

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

Ecco come gestirlo con un elemento di opzione casuale definito come valore predefinito (in questo caso il testo 2 è il valore predefinito):

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

Puoi provare questo:

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

Ho avuto un problema con l'uso della proprietà defaultSelected nella risposta di @Jens Roland in jQuery v1.9.1. Un modo più generico (con molte selezioni dipendenti) sarebbe quello di inserire un attributo predefinito di dati nelle selezioni dipendenti e quindi scorrere attraverso di essi durante il ripristino.

<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 il javascript ...

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

Vedi http://jsfiddle.net/8hvqN/ per una versione funzionante di quanto sopra.

Ho creato una nuova opzione nel tag select che ha un valore di stringa vuota ("") e ho usato:

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

Utilizzare jquery per associare l'evento onchange per selezionare ma non è necessario creare un altro $(this)oggetto 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;
    }
});

Utilizzare questo codice per ripristinare tutti i campi di selezione sull'opzione predefinita, in cui è definito l'attributo selezionato.

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

Ecco la migliore soluzione che sto usando. Questo vale per oltre 1 slectbox

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

L'impostazione dell'opzione 1 nell'elemento select può essere effettuata da questo segmento. Per mostrarlo visivamente, alla fine devi aggiungere .trigger ('change').

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