Cara membuat opsi pertama <select> dipilih dengan jQuery

Bagaimana cara membuat opsi pertama yang dipilih dengan jQuery?

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

$("#target").val($("#target option:first").val());

Anda bisa mencoba ini

$("#target").prop("selectedIndex", 0);

// remove "selected" from any options that might already be selected
$('#target option[selected="selected"]').each(
    function() {
        $(this).removeAttr('selected');
    }
);


// mark the first option as selected
$("#target option:first").attr('selected','selected');

Saat Anda menggunakan

$("#target").val($("#target option:first").val());

ini tidak akan berfungsi di Chrome dan Safari jika nilai opsi pertama adalah nol.

saya lebih memilih

$("#target option:first").attr('selected','selected');

karena bisa bekerja di semua browser.

Mengubah nilai input yang dipilih atau menyesuaikan atribut yang dipilih dapat menimpa propertiOpsi yang dipilih secara default dari elemen DOM, menghasilkan elemen yang mungkin tidak me-reset dengan benar dalam bentuk yang memiliki event reset yang dipanggil.

Gunakan metode prop jQuery untuk menghapus dan mengatur opsi yang diperlukan:

$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");

$("#target")[0].selectedIndex = 0;

Satu titik halus yang saya pikir telah saya temukan tentang jawaban pilihan teratas adalah bahwa meskipun mereka benar mengubah nilai yang dipilih, mereka tidak memperbarui elemen yang dilihat pengguna (hanya ketika mereka mengklik widget mereka akan melihat cek di sebelah elemen yang diperbarui).

Memanggil panggilan .change () hingga akhir juga akan memperbarui widget UI.

$("#target").val($("#target option:first").val()).change();

(Perhatikan bahwa saya perhatikan ini saat menggunakan jQuery Mobile dan sebuah kotak di desktop Chrome, jadi ini mungkin tidak terjadi di mana-mana).

Jika Anda memiliki opsi yang dinonaktifkan, Anda dapat menambahkan tidak ([dinonaktifkan]) untuk mencegah memilihnya yang menghasilkan hal-hal berikut:

$("#target option:not([disabled]):first").attr('selected','selected')

Cara lain untuk mereset nilai (untuk beberapa elemen yang dipilih) dapat berupa ini:

$("selector").each(function(){

    /*Perform any check and validation if needed for each item */

    /*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */

    this.selectedIndex=0;

});

Sederhana seperti itu:

$('#target option:first').prop('selected', true);

$('#newType option:first').prop('selected', true);

Saya telah menemukan bahwa hanya pengaturan attr yang dipilih tidak berfungsi jika sudah ada atribut yang dipilih. Kode yang saya gunakan sekarang pertama-tama akan menghapus atribut yang dipilih, lalu pilih opsi pertama.

$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');

Meskipun masing-masing fungsi mungkin tidak diperlukan ...

$('select').each(function(){
    $(this).find('option:first').prop('selected', 'selected');
});

bekerja untukku.

Inilah cara saya akan melakukannya:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');

Itu hanya berfungsi untuk saya menggunakan pemicu ('perubahan') pada akhirnya, seperti ini:

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

Jika Anda akan menggunakan opsi pertama sebagai suka standar

<select>
    <option value="">Please select an option below</option>
    ...

maka Anda bisa menggunakan:

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

Itu bagus dan sederhana.

Ini berhasil untuk saya!

$("#target").prop("selectedIndex", 0);

Di belakang balasan James Lee Baker, saya lebih suka solusi ini karena menghilangkan ketergantungan pada dukungan browser untuk: pertama: yang dipilih ...

$('#target').children().prop('selected', false);
$($('#target').children()[0]).prop('selected', 'selected');

Bagi saya itu hanya berfungsi ketika saya menambahkan kode berikut:

.change();

Bagi saya itu hanya berfungsi ketika saya menambahkan kode berikut: Karena saya ingin "mengatur ulang" formulir, yaitu, pilih semua opsi pertama dari semua pilihan formulir, saya menggunakan kode berikut:

$('form').find('select').each(function(){ $(this).val($("select option:first").val()); $(this).change(); });

Menggunakan:

$("#selectbox option:first").val()

Silakan temukan kerja sederhana di JSFiddle ini .

Bagi saya, itu hanya berfungsi ketika saya menambahkan baris kode berikut

$('#target').val($('#target').find("option:first").val());

$("#target").val(null);

bekerja dengan baik di chrome

Jika Anda menyimpan objek jQuery dari elemen pilih:

var jQuerySelectObject = $("...");

...

jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());

Periksa pendekatan terbaik ini menggunakan jQuery dengan ECMAScript 6 :

$('select').each((i, item) => {
  var $item = $(item);
  $item.val($item.find('option:first').val()); 
});

Anda dapat memilih opsi apa saja dropdowndengan menggunakannya.

// 'N' can by any number of option.  // e.g.,  N=1 for first option
$("#DropDownId").val($("#DropDownId option:eq(N-1)").val()); 

$('select#id').val($('#id option')[index].value)

Ganti id dengan id tag pilih tertentu dan indeks dengan elemen tertentu yang ingin Anda pilih.

yaitu

<select class="input-field" multiple="multiple" id="ddlState" name="ddlState">
                                        <option value="AB">AB</option>
                                        <option value="AK">AK</option>
                                        <option value="AL">AL</option>
</select>

Jadi di sini untuk pemilihan elemen pertama saya akan menggunakan kode berikut:

$('select#ddlState').val($('#ddlState option')[0].value)

Menggunakan:

alert($( "#target option:first" ).text());