Ustaw wybraną opcję pola wyboru

Chcę ustawić opcję, która została wcześniej wybrana do wyświetlania przy ładowaniu strony. Próbowałem z następującym kodem:

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

z

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

Ale to nie działa. Jakieś pomysły?

To zdecydowanie powinno działać. Oto demo . Upewnij się, że umieściłeś swój kod w $(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);

Odkryłem, że użycie metody jQuery .val () ma znaczną wadę.

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

Jeśli to pole wyboru (lub jakikolwiek inny obiekt wejściowy) ma formę i w formularzu jest używany przycisk resetowania, po kliknięciu przycisku resetowania ustawiona wartość zostanie wyczyszczona i nie będzie resetowana do wartości początkowej, jak można się spodziewać.

Wydaje mi się, że to działa najlepiej.

Dla Wybierz pola

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

Do wprowadzania tekstu

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

Do wprowadzania tekstu

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

Dla pól wyboru

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

Do przycisków radiowych

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

To działa dobrze. Zobacz to skrzypce: http://jsfiddle.net/kveAL/

Możliwe, że musisz zadeklarować swoje jQuery w $(document).ready() obsługi?

Ponadto, czy możesz mieć dwa elementy, które mają ten sam identyfikator?

To byłaby kolejna opcja:

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

Miałem ten sam problem.

Rozwiązanie: dodaj odświeżenie.

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

Wiem, że istnieje kilka iteracji odpowiedzi, ale teraz nie wymaga to jquery ani żadnej innej biblioteki zewnętrznej i można to zrobić dość łatwo, wykonując następujące czynności.

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>

Niektóre przypadki mogą być

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

Mój problem

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

Miałem ten sam problem. Jedyną różnicą w stosunku do twojego kodu jest to, że ładowałem pole wyboru przez wywołanie ajax i gdy tylko wywołanie ajax zostało wykonane, ustawiłem domyślną wartość pola wyboru

Rozwiązanie

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

Miałem problem polegający na tym, że wartość nie została ustawiona z powodu błędu składniowego przed wywołaniem.

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

Przed połączeniem sprawdź błędy składniowe.

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

Dodatek do @icksde i @Korah (dzięki obu!)

Podczas budowania opcji za pomocą AJAX, document.ready może zostać uruchomiony przed zbudowaniem listy, więc

To nie działa

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

To robi

Limit czasu działa, ale jak @icksde mówi, że jest delikatny (faktycznie potrzebowałem 20 ms zamiast 10 ms). Lepiej jest zmieścić go w funkcji AJAX w następujący sposób:

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