Bagaimana cara mengatur opsi pertama pada kotak pilih menggunakan jQuery?

Saya punya dua selectkotak HTML . Saya perlu mengatur ulang satu selectkotak ketika saya membuat pilihan di kotak lain.

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

Ketika saya memilih opsi yang pertama select(yaitu id="name"), saya perlu mengatur ulang yang kedua selectke select all; sama, ketika saya memilih opsi yang kedua select(yaitu id="name2"), saya perlu mengatur ulang yang pertama selectke select all.

Bagaimana saya bisa melakukan itu?

Sesuatu seperti ini harus melakukan trik: https://jsfiddle.net/TmJCE/898/

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


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

Jika Anda hanya ingin mengatur ulang elemen pilih ke posisi pertama, cara paling sederhana adalah:

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

Untuk mengatur ulang semua elemen pilih dalam dokumen:

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

EDIT: Untuk mengklarifikasi sesuai komentar di bawah ini, ini me-reset elemen pilih untuk entri kosong pertama dan hanya jika ada entri kosong dalam daftar.

Seperti yang ditunjukkan oleh @PierredeLESPINAY dalam komentar, solusi asli saya salah - itu akan mengatur ulang dropdown ke opsi paling atas, tetapi hanya karena nilai undefinedkembali diputuskan ke indeks 0.

Inilah solusi yang tepat, yang mempertimbangkan selectedproperti:

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

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

Jawaban asli - TIDAK BENAR

Di jQuery 1.6+ Anda perlu menggunakan .propmetode ini untuk mendapatkan pilihan default:

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

Untuk membuatnya reset secara dinamis ketika dropdown pertama berubah, gunakan .changeacara:

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

Gunakan ini jika Anda ingin mengatur ulang pilih ke opsi yang memiliki atribut "terpilih". Bekerja mirip dengan form.reset () fungsi javascript inbuilt untuk pilih.

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

Ini sangat membantu saya.

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

Berikut adalah cara saya membuatnya berfungsi jika Anda hanya ingin mengembalikannya ke opsi pertama Anda misalnya "Pilih opsi" "Select_id_wrap" jelas merupakan div di sekitar pilih, tetapi saya hanya ingin memperjelas kalau-kalau ada ada kaitannya dengan bagaimana ini bekerja. Milik saya ulang ke fungsi klik tapi saya yakin itu akan bekerja di dalam perubahan juga ...

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

Gunakan kode di bawah ini. Lihat berfungsi di sini http://jsfiddle.net/usmanhalalit/3HPz4/

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

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

Ini juga bisa digunakan

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


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

Ini adalah cara paling fleksibel / dapat digunakan kembali untuk mengatur ulang semua kotak pilih di formulir Anda.

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

Berikut ini cara menanganinya dengan elemen opsi acak yang didefinisikan sebagai nilai default (dalam hal ini Teks 2 adalah default):

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

Anda dapat mencoba ini:

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

Saya punya masalah menggunakan properti defaultSelected dalam jawaban oleh @Jens Roland di jQuery v1.9.1. Cara yang lebih umum (dengan banyak pilihan dependen) adalah dengan meletakkan atribut data-default di dependen pilihan Anda dan kemudian beralih melalui mereka ketika mengatur ulang.

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

Dan javascript ...

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

Lihat http://jsfiddle.net/8hvqN/ untuk versi yang berfungsi di atas.

Saya membuat opsi baru di tag pilih yang memiliki nilai string kosong ("") dan digunakan:

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

Gunakan jquery untuk mengikat acara pertukaran untuk memilih tetapi Anda tidak perlu membuat $(this)objek jquery lain .

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

Gunakan kode ini untuk mengatur ulang semua bidang pilihan ke opsi default, di mana atribut yang dipilih ditentukan.

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

Inilah solusi terbaik yang saya gunakan. Ini akan berlaku untuk lebih dari 1 slectbox

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

Opsi pengaturan 1 di elemen pilih dapat dilakukan oleh segmen ini. Untuk memperlihatkannya secara visual, Anda harus menambahkan .trigger ('change') di akhir.

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