Come usare jQuery per selezionare un'opzione a discesa?

157

Mi chiedevo se è possibile ottenere jQuery per selezionare un <option>, diciamo il 4 ° elemento, in una casella a discesa?

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

Voglio che l'utente faccia clic su un collegamento, quindi la <select>casella cambi il suo valore, come se l'utente lo avesse selezionato facendo clic su <option>.

— punteggiato
fonte

4

le tue opzioni hanno un valore?

— Victor,

184

Che ne dite di

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

esempio su http://www.jsfiddle.net/gaby/CWvwn/

per le versioni moderne di jquery dovresti usare .prop()invece di.attr()

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

esempio su http://jsfiddle.net/gaby/CWvwn/1763/

— Gabriele Petrioli
fonte

3

imo questo non dovrebbe nemmeno funzionare; lo stato selezionato di un'opzione dovrebbe essere attivato modificando invece lo stato della selezione stessa :)

— Ja͢ck

1

selectElement.selectedIndex = index;è ciò che Jack intende.

— rlemon

@rlemon, ho capito, ma selectedIndexnon può essere utilizzato per la selezione multipla quando multipleviene utilizzato l'attributo. E il modo normale ( html ) di impostare gli elementi selezionati è l' selectedattributo degli optionelementi.

— Gabriele Petrioli,

@ GabyakaG.Petrioli Il modo normale è in realtà impostare la selectedproprietà di ciascun optionselemento corrispondente su true(e facoltativamente il resto su falseesplicitamente). Le selezioni multiple sono in realtà piuttosto brutte :)

— Ja͢ck

6

@sunnyiitkgp l' onchangeevento non viene mai attivato quando il valore viene modificato a livello di codice . Potresti aggiungere un .trigger('change')alla fine per lanciare anche l'evento ( anche se si attiverà indipendentemente dal valore effettivamente cambiato )

— Gabriele Petrioli

149

La soluzione:

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

— Harold Sota
fonte

2

non imposta l' selectedopzione in HTML.

— Ahmad hamza,

54

Gli elementi di selezione HTML hanno una selectedIndexproprietà su cui è possibile scrivere per selezionare una particolare opzione:

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

Utilizzando JavaScript semplice questo può essere ottenuto mediante:

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

— Jack
fonte

7

Questa dovrebbe essere la risposta accettata ... Sembra la soluzione più sana e pulita ...

— Denys Séguret,

1

Il problema è che non genera un evento "onchange".

— Guy Korland,

2

@GuyKorland Questo succede anche con nessuna delle altre risposte, dimostrata qui ; se vuoi che un evento si attivi, devi farlo manualmente.

— Ja͢ck,

1

@ Jack C'è un modo breve? L'unico modo in cui ho trovato: var fireEvent = function (selectElement) {if (selectElement) {if ("fireEvent" in selectElement) {selectElement.fireEvent ("onchange"); } else {var evt = document.createEvent ("HTMLEvents"); evt.initEvent ("change", false, true); selectElement.dispatchEvent (EVT); }}}

— Guy Korland,

4

@GuyKorland jQuery lo espone .trigger(), ma poiché lo stai già facendo con il codice, sarebbe facile chiamare anche i gestori delle modifiche.

— Ja͢ck

30

Lo farei così

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

— franzisk
fonte

3

questa dovrebbe essere la risposta selezionata

— Uzumaki Naruto,

2

$ ("# idElement"). val ('optionValue'). change () potrebbe anche funzionare

— Ullullu,

24

se le tue opzioni hanno un valore, puoi farlo:

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

'select' sarebbe l'id della tua selezione o un selettore di classe. oppure se esiste una sola selezione, puoi usare il tag come nell'esempio.

— Vincitore
fonte

2

Questo è esattamente ciò di cui avevo bisogno. Grazie.

— chapman84,

23

Il modo più semplice è la val(value)funzione:

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

E per ottenere il valore selezionato non dare argomenti:

$('select').val();

Inoltre, se hai <option value="valueToSelect">...</option>, puoi fare:

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

DEMO

— Ionică Bizău
fonte

Ha funzionato anche $ ('# SelectCtrlId'). Val ('ValueToSelect');

— Sai,

9

Utilizzare il seguente codice se si desidera selezionare un'opzione con un valore specifico:

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

— nlareu
fonte

$ ( 'selezionare') val (valore).; Perché così serio? ;)

— Zeeshan,

1

@Zee Il codice di risposta consente anche selezioni multiple.

— Azghanvi,

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

Preferisco nth-child () a eq () in quanto utilizza l'indicizzazione basata su 1 piuttosto che su base 0, che è leggermente più facile per il mio cervello.

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

— Lee D
fonte

L '"indice basato su 1" è migliore quando si manipolano le cose con le date. Mi salva da molti problemi. Grazie.

— TCB13

3

Con '' element usiamo solitamente l'attributo 'value'. Quindi sarà più facile impostare:

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

— Savaratkar
fonte

3

Prova questo:

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

Saluti!

— Nicolas Finelli
fonte

2

rispondi con id:

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

— Javad Masoumi
fonte

1

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

Un avvertimento qui è se hai javascript che guarda per l'evento di cambiamento select / option che devi aggiungere .trigger('change') affinché il codice diventi.

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

perché solo la chiamata .attr('selected', 'selected')non attiva l'evento

— kanitw
fonte