Definir opção selecionada da caixa de seleção

Quero definir uma opção que foi selecionada anteriormente para ser exibida no carregamento da página. Eu tentei com o seguinte código:

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

com

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

Mas isso não funciona. Alguma ideia?

Definitivamente, isso deve funcionar. Aqui está uma demonstração . Verifique se você inseriu seu código em $(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);

Descobri que o método jQuery .val () tem uma desvantagem significativa.

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

Se esta caixa de seleção (ou qualquer outro objeto de entrada) estiver em um formulário e houver um botão de redefinição usado no formulário, quando o botão de redefinir for clicado, o valor definido será limpo e não redefinido para o valor inicial, como seria de esperar.

Isso parece funcionar melhor para mim.

Para caixas de seleção

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

Para entradas de texto

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

Para entradas de área de texto

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

Para caixas de seleção

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

Para botões de opção

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

Isso funciona bem. Veja este violino: http://jsfiddle.net/kveAL/

É possível que você precise declarar seu jQuery em um $(document).ready() manipulador?

Além disso, você pode ter dois elementos com o mesmo ID?

Essa seria outra opção:

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

Eu tive o mesmo problema.

Solução: adicione uma atualização.

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

Eu sei que existem várias iterações de respostas, mas agora isso não requer jquery ou qualquer outra biblioteca externa e pode ser realizado com bastante facilidade apenas com o seguinte.

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>

Alguns casos podem ser

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

Meu problema

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

Eu tive o mesmo problema . A única diferença do seu código é que eu estava carregando a caixa de seleção por meio de uma chamada ajax e, assim que a chamada ajax foi executada, eu havia definido o valor padrão da caixa de seleção

A solução

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

Eu tive um problema em que o valor não foi definido devido a um erro de sintaxe antes da chamada.

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

Verifique se há erros de sintaxe antes da chamada.

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

Além de @icksde e @Korah (thx both!)

Ao criar as opções com o AJAX, o document.ready pode ser acionado antes da criação da lista, portanto

Isso não funciona

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

Isso faz

Um tempo limite funciona, mas como @icksde diz que é frágil (eu realmente precisava de 20ms em vez de 10ms). É melhor ajustá-lo dentro da função AJAX da seguinte maneira:

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