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

352

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?

Voto a favor
fonte
10
Na verdade, é assim que deve funcionar. Tem certeza de que definiu o valor em document.ready ()? Talvez o código seja executado quando a caixa de seleção ainda não estiver pronta.
Morph

Respostas:

496

Definitivamente, isso deve funcionar. Aqui está uma demonstração . Verifique se você inseriu seu código em $(document).ready:

$(function() {
    $("#gate").val('gateway_2');
});
Darin Dimitrov
fonte
4
ok, quando eu cair para baixo a lista destaca-se, mas não exibido como primeiro elemento da lista
Upvote
2
ahh declarei que não está na função de documento pronto ... obrigado!
Aprovado
7
Não é tão bom quanto definir o atributo "selecionado" para "selecionado".
Adal
6
@Adal Por que isso não é tão bom quanto definir o atributo 'selecionado' como 'selecionado'?
Shawn
26
Caso alguém mais se pergunte, o 'Gateway 2'passado para a função valcorresponde ao valor do valueatributo da opção de seleção, não ao seu texto. Veja este JSFiddle , que é uma versão muito moderada da demo de Darin, para um exemplo do que quero dizer.
precisa saber é o seguinte
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
});
Zkoh
fonte
37

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

Marty Hirsch
fonte
2
Muito parecido com o $('#your-select-box-id :nth-child(2)').prop('selected', true)que funciona, com atualização visual da caixa suspensa.
Big Rich
Apenas um que funcionou para mim. Suspeito porque estou usando uma biblioteca de seleção personalizada.
31518 Louis M.
15

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);
Mike
fonte
12
  $("#form-field").val("5").trigger("change");
Mohd Bashir
fonte
11
Teria sido bom se você incluísse algumas informações sobre isso. Este é um ótimo exemplo de como você deve fazer isso, se tiver um código que esteja observando alterações no select.
Sean.boyer 31/07/19
6

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?

James Wiseman
fonte
6

Essa seria outra opção:

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

Eu tive o mesmo problema.

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

$("#gate").val('Gateway 2');
$("#gate").selectmenu('refresh');
Publicado
fonte
3
isto é só para selectmenu jqueryui, não html padrão
stuartdotnet
3

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>

SyWill
fonte
ótima solução. mas parece que ele não remove atributo selecionado de opções previamente selecionadas
Sistemas Rebooter
3

Alguns casos podem ser

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

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);
Korah
fonte
11
você analisou o problema corretamente, mas a solução é ruim e frágil. você tem que usar uma função de retorno ligado à sua chamada ajax
icksde
-1

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.

Howard
fonte
4
Por mais útil que seja ser lembrado para verificar se há erros de sintaxe, isso não é uma resposta.
Shotgun Ninja
-1
$(function() {
$("#demo").val('hello');
});
Gaurav Rai
fonte
-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');
});
Ronnel Castillo Ocampo
fonte
11
Este ciclo vontade, mesmo passado o valor seleccionado, o que é ineficiente
Daniel Nuriyev
O Plus .attr()tem sido a maneira errada de fazer isso desde muito antes de esta resposta ser publicada.
Auspex
-2

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