Existem várias maneiras de fazer isso, mas a abordagem mais limpa foi perdida entre as principais respostas e muitos argumentos sobre val()
. Também alguns métodos foram alterados a partir do jQuery 1.6, portanto, isso precisa de uma atualização.
Para os exemplos a seguir, assumirei que a variável $select
é um objeto jQuery apontando para a <select>
tag desejada , por exemplo, através do seguinte:
var $select = $('.selDiv .opts');
Nota 1 - use val () para correspondências de valores:
Para a correspondência de valores, usar val()
é muito mais simples do que usar um seletor de atributos: https://jsfiddle.net/yz7tu49b/6/
$select.val("SEL2");
A versão setter de .val()
é implementada em select
tags, configurando a selected
propriedade de uma correspondência option
com a mesmavalue
, portanto funciona bem em todos os navegadores modernos.
Nota 2 - use prop ('selecionado', verdadeiro):
Se você deseja definir o estado selecionado de uma opção diretamente, pode usar prop
(não attr
) um boolean
parâmetro (em vez do valor do texto selected
):
por exemplo, https://jsfiddle.net/yz7tu49b/
$option.prop('selected', true); // Will add selected="selected" to the tag
Nota 3 - permita valores desconhecidos:
Se você usar val()
para selecionar um <option>
, mas o val não for correspondido (pode ocorrer dependendo da origem dos valores), "nada" será selecionado e $select.val()
retornará null
.
Portanto, para o exemplo mostrado e por uma questão de robustez, você pode usar algo como este https://jsfiddle.net/1250Ldqn/ :
var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
$select.val("DEFAULT");
}
Nota 4 - correspondência exata do texto:
Se você deseja corresponder pelo texto exato, pode usar a filter
função with. por exemplo, https://jsfiddle.net/yz7tu49b/2/ :
var $select = $('.selDiv .opts');
$select.children().filter(function(){
return this.text == "Selection 2";
}).prop('selected', true);
embora se você tiver um espaço em branco extra, poderá adicionar um recorte à verificação, como em
return $.trim(this.text) == "some value to match";
Nota 5 - correspondência por índice
Se você deseja corresponder por índice, apenas indexe os filhos do select, por exemplo, https://jsfiddle.net/yz7tu49b/3/
var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;
Embora eu costumo evitar propriedades diretas do DOM em favor do jQuery hoje em dia, para código à prova de futuro, isso também pode ser feito como https://jsfiddle.net/yz7tu49b/5/ :
var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);
Nota 6 - use change () para disparar a nova seleção
Em todos os casos acima, o evento de alteração não é acionado. Isso ocorre por design, para que você não termine com eventos de mudança recursivos.
Para gerar o evento de mudança, se necessário, basta adicionar uma chamada ao objeto .change()
jQuery select
. por exemplo, o primeiro exemplo mais simples se torna https://jsfiddle.net/yz7tu49b/7/
var $select = $('.selDiv .opts');
$select.val("SEL2").change();
Também existem muitas outras maneiras de encontrar os elementos usando seletores de atributos, como [value="SEL2"]
, mas você deve lembrar que os seletores de atributos são relativamente lentos em comparação com todas essas outras opções.
$("#my_select").val("the_new_value").change();
... de so