Tetapkan opsi yang dipilih dari kotak pilih


352

Saya ingin mengatur opsi yang dipilih sebelumnya untuk ditampilkan pada halaman memuat. Saya mencobanya dengan kode berikut:

$("#gate").val('Gateway 2');

dengan

<select id="gate">
    <option value='null'>- choose -</option>
    <option value='gateway_1'>Gateway 1</option>
    <option value='gateway_2'>Gateway 2</option>
</select>

Tetapi ini tidak berhasil. Ada ide?


10
Sebenarnya itu adalah cara kerjanya, apakah Anda yakin Anda menetapkan nilai dalam dokumen. Sudah ()? Mungkin kode dieksekusi ketika kotak pilih belum siap.
Morph

Jawaban:


496

Ini pasti bekerja. Ini demo . Pastikan Anda telah menempatkan kode Anda ke $(document).ready:

$(function() {
    $("#gate").val('gateway_2');
});

4
ok, ketika saya drop down daftar itu disorot tetapi tidak ditampilkan sebagai elemen pertama dalam daftar
Upvote

2
ahh saya menyatakan tidak dalam fungsi siap dokumen ... terima kasih!
Suara positif

7
Tidak sebagus mengatur atribut "terpilih" ke "terpilih".
Adal

6
@ Adal Mengapa ini tidak sebagus mengatur atribut 'terpilih' menjadi 'terpilih'?
Shawn

26
Untuk berjaga-jaga jika ada orang lain yang bertanya-tanya, fungsi yang 'Gateway 2'diteruskan ke valcocok dengan nilai valueatribut dari opsi pilih, bukan teksnya. Lihat JSFiddle ini , yang merupakan demo demo versi Darin yang sedikit diedit, untuk contoh apa yang saya maksud.
Kenny Evitt

166
$(document).ready(function() {
    $("#gate option[value='Gateway 2']").prop('selected', true);
    // you need to specify id of combo to set right combo, if more than one combo
});

37

$('#gate').val('Gateway 2').prop('selected', true);


2
Sangat mirip dengan $('#your-select-box-id :nth-child(2)').prop('selected', true)yang berfungsi, dengan pembaruan visual dari drop-box.
Big Rich

Hanya satu yang bekerja untuk saya. Tersangka karena saya menggunakan pustaka pilih khusus.
Louis M.

15

Saya telah menemukan menggunakan metode jQuery .val () untuk memiliki kelemahan yang signifikan.

<select id="gate"></select>
$("#gate").val("Gateway 2");

Jika kotak pilih ini (atau objek input lainnya) dalam bentuk dan ada tombol reset yang digunakan dalam formulir, ketika tombol reset diklik nilai yang ditetapkan akan dihapus dan tidak diatur ulang ke nilai awal seperti yang Anda harapkan.

Ini sepertinya yang terbaik bagi saya.

Untuk kotak Pilih

<select id="gate"></select>
$("#gate option[value='Gateway 2']").attr("selected", true);

Untuk input teks

<input type="text" id="gate" />
$("#gate").attr("value", "your desired value")

Untuk input textarea

<textarea id="gate"></textarea>
$("#gate").html("your desired value")

Untuk kotak centang

<input type="checkbox" id="gate" />
$("#gate option[value='Gateway 2']").attr("checked", true);

Untuk tombol radio

<input type="radio" id="gate" value="this"/> or <input type="radio" id="gate" value="that"/>
$("#gate[value='this']").attr("checked", true);

12
  $("#form-field").val("5").trigger("change");

1
Akan lebih baik jika Anda memasukkan beberapa info tentang ini. Ini adalah contoh yang bagus tentang bagaimana Anda HARUS melakukan ini, JIKA Anda memiliki kode yang mengawasi perubahan pada pilih.
sean.boyer

6

Itu bekerja dengan baik. Lihat biola ini: http://jsfiddle.net/kveAL/

Mungkin saja Anda perlu mendeklarasikan jQuery Anda di $(document).ready()handler?

Juga, mungkin Anda memiliki dua elemen yang memiliki ID yang sama?


6

Ini akan menjadi pilihan lain:

$('.id_100 option[value=val2]').prop('selected', true);

6

Saya memiliki masalah yang sama.

Solusi: tambahkan refresh.

$("#gate").val('Gateway 2');
$("#gate").selectmenu('refresh');

3
ini hanya untuk selectmenu jqueryui, bukan html standar
stuartdotnet

3

Saya tahu ada beberapa iterasi jawaban tetapi sekarang ini tidak memerlukan jquery atau perpustakaan eksternal lainnya dan dapat diselesaikan dengan mudah hanya dengan yang berikut ini.

document.querySelector("#gate option[value='Gateway 2']").setAttribute('selected',true);
<select id="gate">
    <option value='null'>- choose -</option>
    <option value='Gateway 1'>Gateway 1</option>
    <option value='Gateway 2'>Gateway 2</option>
</select>


solusi hebat tetapi sepertinya itu tidak menghapus atribut yang dipilih dari opsi yang dipilih sebelumnya
Systems Rebooter

3

Beberapa kasus mungkin

$('#gate option[value='+data.Gateway2+']').attr('selected', true);

1

Masalahku

get_courses(); //// To load the course list
$("#course").val(course); //// Setting default value of the list

Saya memiliki masalah yang sama. Satu-satunya perbedaan dari kode Anda adalah bahwa saya memuat kotak pilih melalui panggilan ajax dan segera setelah panggilan ajax dieksekusi, saya telah menetapkan nilai default kotak pilih

Solusinya

get_courses();
   setTimeout(function() {
     $("#course").val(course);
  }, 10);

1
Anda menganalisis masalah dengan benar, tetapi solusinya buruk dan rapuh. Anda harus menggunakan fungsi panggilan balik yang dilampirkan ke panggilan ajax Anda
icksde

-1

Saya punya masalah ketika nilainya tidak disetel karena kesalahan sintaksis sebelum panggilan.

$("#someId").value(33); //script bailed here without showing any errors Note: .value instead of .val
$("#gate").val('Gateway 2'); //this line didn't work.

Periksa kesalahan sintaksis sebelum panggilan.


4
Bermanfaat untuk diingatkan untuk memeriksa kesalahan sintaksis, ini bukan jawaban.
Shotgun Ninja


-2
// Make option have a "selected" attribute using jQuery

var yourValue = "Gateway 2";

$("#gate").find('option').each(function( i, opt ) {
    if( opt.value === yourValue ) 
        $(opt).attr('selected', 'selected');
});

1
Ini akan
berulang

Plus .attr()telah menjadi cara yang salah untuk melakukan ini sejak jauh sebelum jawaban ini diposting.
Auspex

-2

Tambahan ke @icksde dan @Korah (thx keduanya!)

Saat membangun opsi dengan AJAX dokumen. Sudah dapat dipicu sebelum daftar dibangun, jadi

Ini tidak berhasil

$(document).ready(function() {
    $("#gate").val('Gateway 2');
});

Ini tidak

Timeout tidak berfungsi tetapi sebagai @icksde mengatakan itu rapuh (saya benar-benar membutuhkan 20ms sebagai pengganti 10ms). Lebih baik untuk memasangnya di dalam fungsi AJAX seperti ini:

$("#someObject").change(function() {
    $.get("website/page.php", {parameters}, function(data) {
        $("#gate").append("<option value='Gateway 2'">" + "Gateway 2" + "</option>");
        $("#gate").val('Gateway 2');
    }, "json");
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.