Jak ustawić pierwszą opcję na polu wyboru za pomocą jQuery?

Mam dwa selectpola HTML . Muszę zresetować jedno selectpudełko, gdy dokonuję wyboru w innym.

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

Kiedy wybieram opcję pierwszej select(tj. id="name"), Muszę zresetować drugą selectdo select all; podobnie, gdy wybieram opcję drugiej select(tj. id="name2"), muszę zresetować pierwszą selectna select all.

Jak mogę to zrobić?

Coś takiego powinno załatwić sprawę: https://jsfiddle.net/TmJCE/898/

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


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

Jeśli chcesz po prostu zresetować zaznaczony element do jego pierwszej pozycji, najprostszym sposobem może być:

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

Aby zresetować wszystkie zaznaczone elementy w dokumencie:

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

EDYCJA: Aby wyjaśnić zgodnie z komentarzem poniżej, powoduje to zresetowanie wybranego elementu do pierwszego pustego wpisu i tylko wtedy, gdy na liście znajduje się pusty wpis.

Jak wskazał @PierredeLESPINAY w komentarzach, moje oryginalne rozwiązanie było niepoprawne - zresetowałoby menu rozwijane do najwyższej opcji, ale tylko dlatego, że undefinedwartość zwracana została rozwiązana na indeks 0.

Oto poprawne rozwiązanie, które bierze selectedpod uwagę właściwość:

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

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

Oryginalna odpowiedź - NIEPRAWIDŁOWA

W jQuery 1.6+ musisz użyć .propmetody, aby uzyskać domyślny wybór:

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

Aby resetować się dynamicznie po zmianie pierwszego menu rozwijanego, użyj .changezdarzenia:

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

Użyj tego, jeśli chcesz zresetować wybór do opcji, która ma atrybut „wybrane”. Działa podobnie do wbudowanej funkcji javascript form.reset () do select.

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

To mi bardzo pomaga.

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

Oto jak to działało, jeśli chcesz tylko przywrócić to do swojej pierwszej opcji np. "Wybierz opcję" "Select_id_wrap" to oczywiście element div wokół zaznaczenia, ale chcę to tylko wyjaśnić na wszelki wypadek jakikolwiek wpływ na to, jak to działa. Mój resetuje się do funkcji kliknięcia, ale jestem pewien, że będzie działać również w przypadku zmiany ...

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

Użyj poniższego kodu. Zobacz, jak działa tutaj http://jsfiddle.net/usmanhalalit/3HPz4/

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

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

Można to również wykorzystać

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


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

Jest to najbardziej elastyczny / wielokrotnego użytku sposób resetowania wszystkich zaznaczonych pól w formularzu.

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

Oto jak sobie z tym poradzić za pomocą losowego elementu opcji zdefiniowanego jako wartość domyślna (w tym przypadku domyślnym jest tekst 2):

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

Możesz spróbować tego:

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

Miałem problem z użyciem właściwości defaultSelected w odpowiedzi @Jens Roland w jQuery v1.9.1. Bardziej ogólnym sposobem (z wieloma selekcjami zależnymi) byłoby umieszczenie atrybutu wartości domyślnych danych w selekcjach zależnych, a następnie iterowanie przez nie podczas resetowania.

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

A javascript ...

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

Zobacz http://jsfiddle.net/8hvqN/, aby uzyskać działającą wersję powyższego.

Utworzyłem nową opcję w tagu select, która ma wartość pustego ciągu („”) i użyłem:

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

Użyj jquery do powiązania zdarzenia onchange do wybrania, ale nie musisz tworzyć kolejnego $(this)obiektu 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;
    }
});

Użyj tego kodu, aby zresetować wszystkie pola wyboru do opcji domyślnej, w której zdefiniowany jest wybrany atrybut.

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

Oto najlepsze rozwiązanie, którego używam. Dotyczy to ponad 1 slectboxa

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

W tym segmencie można ustawić opcję 1 w wybranym elemencie. Aby to pokazać wizualnie, musisz dodać .trigger ('zmiana') na końcu.

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