Tetapkan opsi yang dipilih dari kotak pilih

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?

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

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

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

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

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

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

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?

Ini akan menjadi pilihan lain:

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

Saya memiliki masalah yang sama.

Solusi: tambahkan refresh.

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

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>

Beberapa kasus mungkin

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

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

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.

$(function() {
$("#demo").val('hello');
});

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

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");
});