Como usar o jQuery para selecionar uma opção suspensa?

157

Eu queria saber se é possível obter o jQuery para selecionar um <option>, digamos o quarto item, em uma caixa suspensa?

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

Quero que o usuário clique em um link e faça com que a <select>caixa altere seu valor, como se o usuário o tivesse selecionado clicando no <option>.

— dotty
fonte

4

suas opções têm um valor?

— 213 Victor Victor

184

E se

$('select>option:eq(3)').attr('selected', true);

exemplo em http://www.jsfiddle.net/gaby/CWvwn/

para versões modernas do jquery, você deve usar o em .prop()vez de.attr()

$('select>option:eq(3)').prop('selected', true);

exemplo em http://jsfiddle.net/gaby/CWvwn/1763/

— Gabriele Petrioli
fonte

3

imo isso nem deveria funcionar; o estado selecionado de uma opção deve ser acionado alterando o estado da escolha em si em vez :)

— Jack

1

selectElement.selectedIndex = index;é o que Jack quer dizer.

— Rlemon 31/01

@ rlemon, eu entendo, mas selectedIndexnão pode ser usado para seleção múltipla quando multipleatributo é usado. E a maneira normal ( html ) de definir elementos selecionados é o selectedatributo dos optionelementos.

— Gabriele Petrioli 31/01

@ GabyakaG.Petrioli A maneira normal é realmente definir a selectedpropriedade de cada optionselemento correspondente como true(e opcionalmente o restante falseexplicitamente). Várias seleções são bastante desagradável, na verdade :)

— Jack

6

@sunnyiitkgp o onchangeevento nunca é acionado quando o valor é alterado programaticamente. Você pode adicionar um .trigger('change')no final para também acionar o evento ( embora ele irá disparar independentemente do valor de ter realmente mudado )

— Gabriele Petrioli

149

A solução:

$("#element-id").val('the value of the option');

— Harold Sota
fonte

2

não define a selectedopção no HTML.

— Ahmad hamza

54

Os elementos de seleção HTML têm uma selectedIndexpropriedade que pode ser gravada para selecionar uma opção específica:

$('select').prop('selectedIndex', 3); // select 4th option

Usando JavaScript simples, isso pode ser alcançado por:

// use first select element
var el = document.getElementsByTagName('select')[0]; 
// assuming el is not null, select 4th option
el.selectedIndex = 3;

— Ja͢ck
fonte

7

Esta deve ser a resposta aceita ... Parece que a solução mais sã e mais limpa ...

— Denys Séguret

1

O problema é que ele não dispara um evento 'onchange'.

— Guy Korland

2

@GuyKorland Isso também não acontece com nenhuma das outras respostas, demonstradas aqui ; se você deseja que um evento seja acionado, você deve fazê-lo manualmente.

— Ja͢ck

1

@ Jack Existe uma maneira curta? A única maneira que encontrei: var fireEvent = function (selectElement) {if (selectElement) {if ("fireEvent" em selectElement) {selectElement.fireEvent ("onchange"); } else {var evt = document.createEvent ("HTMLEvents"); evt.initEvent ("alteração", falso, verdadeiro); selectElement.dispatchEvent (evt); }}}

— Guy Korland

4

@GuyKorland O jQuery expõe .trigger()isso, mas como você já está fazendo isso com código, seria fácil também chamar os manipuladores de alterações.

— Ja͢ck

30

Eu faria assim

 $("#idElement").val('optionValue').trigger('change');

— franzisk
fonte

3

esta deve ser a resposta escolhida

— Uzumaki Naruto

2

$ ("# idElement"). val ('optionValue'). change () também poderia funcionar

— Ullullu

24

se suas opções tiverem um valor, você pode fazer isso:

$('select').val("the-value-of-the-option-you-want-to-select");

'select' seria o ID do seu select ou de um seletor de classe. ou, se houver apenas uma seleção, você pode usar a tag como está no exemplo.

— Vencedor
fonte

2

Isso é exatamente o que eu precisava. Obrigado.

— precisa saber é o seguinte

23

A maneira mais fácil é a val(value)função:

$('select').val(2);

E para obter o valor selecionado, você não fornece argumentos:

$('select').val();

Além disso, se você tem <option value="valueToSelect">...</option>, você pode fazer:

$('select').val("valueToSelect");

DEMO

— Ionică Bizău
fonte

Também funcionou $ ('# SelectCtrlId'). Val ('ValueToSelect');

— Sai

9

Use o seguinte código se desejar selecionar uma opção com um valor específico:

$('select>option[value="' + value + '"]').prop('selected', true);

— nlareu
fonte

$ ('selecionar'). val (valor); Porquê tão sério? ;)

— Zeeshan

1

@Zee O código respondido também permite várias seleções.

— Azghanvi 7/07

5

 Try with the below codes. All should work. 
    $('select').val(2);
    $('select').prop('selectedIndex', 1);
    $('select>option[value="5"]').prop('selected', true);
    $('select>option:eq(3)').attr('selected', 'selected');
    $("select option:contains(COMMERCIAL)").attr('selected', true);

— Mamun Rasid
fonte

3

Prefiro nth-child () a eq (), pois usa indexação com base em 1 e não em 0, o que é um pouco mais fácil para o meu cérebro.

//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);

— Lee D
fonte

O "índice baseado em 1" é melhor ao manipular itens com datas. Me salva de muitos problemas. obrigado.

— TCB13

3

Com o elemento '' geralmente usamos o atributo 'value'. Facilitará a configuração:

$('select').val('option-value');

— Savaratkar
fonte

3

Tente o seguinte:

$('#mySelectElement option')[0].selected = true;

Saudações!

— Nicolas Finelli
fonte

2

responda com id:

$('#selectBoxId').find('option:eq(0)').attr('selected', true);

— Javad Masoumi
fonte

1

 $('select>option:eq(3)').attr('selected', 'selected');

Uma ressalva aqui é se você tem javascript assistindo ao evento de alteração da opção / opção que você precisa adicionar .trigger('change')para que o código se torne.

 $('select>option:eq(3)').attr('selected', 'selected').trigger('change');

porque apenas a chamada .attr('selected', 'selected')não aciona o evento

— kanitw
fonte