Seçme kutusunun seçili seçeneğini ayarla

Daha önce sayfa yüklemesinde görüntülenmek üzere seçilen bir seçeneği ayarlamak istiyorum. Aşağıdaki kod ile denedim:

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

ile

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

Ancak bu işe yaramıyor. Herhangi bir fikir?

Bu kesinlikle işe yaramalı. İşte bir demo . Kodunuzu aşağıdakilere yerleştirdiğinizden emin olun $(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);

Önemli bir dezavantaj için jQuery .val () yöntemini kullanarak bulduk.

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

Bu seçim kutusu (veya başka herhangi bir giriş nesnesi) bir formdaysa ve formda kullanılan bir sıfırlama düğmesi varsa, sıfırlama düğmesine tıklandığında ayarlanan değer silinir ve beklediğiniz gibi başlangıç ​​değerine sıfırlanmaz.

Bu benim için en iyisi gibi görünüyor.

Seçim kutuları için

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

Metin girişleri için

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

Metin girişi için

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

Onay kutusu kutuları için

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

Radyo düğmeleri için

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

Güzel çalışıyor. Bu kemanı görün: http://jsfiddle.net/kveAL/

JQuery'nizi bir $(document).ready()işleyicide bildirmeniz gerekebilir ?

Ayrıca, aynı kimliğe sahip iki öğeniz olabilir mi?

Bu başka bir seçenek olurdu:

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

Ben de aynı problemi yaşadım.

Çözüm: yenileme ekleyin.

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

Birkaç cevap tekrarı olduğunu biliyorum ama şimdi bu jquery veya başka bir dış kütüphane gerektirmez ve sadece aşağıdaki ile oldukça kolay başarılabilir.

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>

Bazı durumlar olabilir

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

Benim sorunum

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

Aynı sorunu yaşadım. Kodunuzdaki tek fark, seçim kutusunu bir ajax çağrısı aracılığıyla yüklediğim ve ajax çağrısı yürütülür yapılmaz, seçim kutusunun varsayılan değerini ayarlamış olduğum

Çözüm

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

Çağrı öncesi sözdizimi hatası nedeniyle değerin ayarlanmadığı bir sorun vardı.

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

Çağrıdan önce sözdizimi hatalarını kontrol edin.

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

@İcksde ve @Korah'a ekleme (ikisi de thx!)

Oluştururken seçenekleri AJAX ile liste inşa edilmeden önce document.ready yüzden, tetiklenebilir

Bu işe yaramıyor

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

Bu yapar

Bir zaman aşımı işe yarar ama @icksde kırılgan dediği gibi (aslında 10 ms yerine 20 ms'ye ihtiyacım vardı). AJAX işlevinin içine sığdırmak daha iyidir:

$("#someObject").change(function() {
    $.get("website/page.php", {parameters}, function(data) {
        $("#gate").append("<option value='Gateway 2'">" + "Gateway 2" + "</option>");
        $("#gate").val('Gateway 2');
    }, "json");
});