Imposta l'indice selezionato di un menu a discesa utilizzando jQuery

165

Come posso impostare l'indice di un menu a discesa in jQuery se il modo in cui trovo il controllo è il seguente:

$("*[id$='" + originalId + "']")

Lo faccio in questo modo perché sto creando controlli in modo dinamico e poiché gli ID vengono modificati durante l'utilizzo di Web Form, l'ho trovato come soluzione per trovarmi alcuni controlli. Ma una volta che ho l'oggetto jQuery, non so come impostare l'indice selezionato su 0 (zero).

jquery

— once.
fonte

352

Prima di tutto, quel selettore è piuttosto lento. Scansionerà ogni elemento DOM alla ricerca degli ID. Sarà meno un hit dalle prestazioni se puoi assegnare una classe all'elemento.

$(".myselect")

Per rispondere alla tua domanda, ci sono alcuni modi per cambiare il valore di selezione degli elementi in jQuery

// sets selected index of a select box to the option with the value "0"
$("select#elem").val('0'); 

// sets selected index of a select box to the option with the value ""
$("select#elem").val(''); 

// sets selected index to first item using the DOM
$("select#elem")[0].selectedIndex = 0;

// sets selected index to first item using jQuery (can work on multiple elements)
$("select#elem").prop('selectedIndex', 0);

— gnarf
fonte

c'è un modo migliore per farlo? Ho pensato che avrebbe scansionato l'intero DOM cercando di abbinare l'ID, ma dato che sono nuovo di jQuery ho pensato, facciamolo funzionare e vediamo se c'è un modo migliore per farlo. Qualsiasi consiglio sarà apprezzato.

— oz.

Sì: se puoi assegnare una classe agli elementi che devi trovare, sarebbe un selettore molto più veloce.

— gnarf,

@gnarf non sono gli ID più veloci?

— KBN,

#an-idè più veloce, ma *[id$=ends-with]è molto più lento, ecco cosa significa "assegnare una classe all'elemento"

— gnarf

Che ne dici se ho più DropDownList ASP.net con diverso valore di indice selezionato?

— SearchForKnowledge,

106

Ho appena trovato questo, funziona per me e personalmente trovo che sia più facile da leggere.

Questo imposterà l'indice reale proprio come l'opzione numero 3 di risposta di gnarf.

// sets selected index of a select box the actual index of 0 
$("select#elem").attr('selectedIndex', 0);

Questo non funzionava ma ora ... vedi bug: http://dev.jquery.com/ticket/1474

appendice

Come raccomandato nei commenti usare:

$("select#elem").prop('selectedIndex', 0);

— 4imble
fonte

30

E a partire da jQuery 1.6 dovresti usare .prop('selectedIndex', 0);indipendentemente dal fatto che .attr()

— funzioni

1

Corretto, in effetti potrebbe non funzionare in 1.7. vedi risposta accettato: stackoverflow.com/questions/8010664/...

— 4imble

+1 per l'addendum. Il mio vecchio codice si è rotto a causa di questo problema

— BiLaL

11

Sto scrivendo questa risposta nel 2015 e per qualche motivo (probabilmente versioni precedenti di jQuery) nessuna delle altre risposte ha funzionato per me. Voglio dire, cambiano l'indice selezionato, ma in realtà non si riflette sul menu a discesa reale.

Ecco un altro modo per cambiare l'indice e farlo riflettere nel menu a discesa:

$('#mydropdown').val('first').change();

— PaulG
fonte

1

Grazie per la tua risposta. Solo questa risposta ha funzionato per me

— Viraj Dhamal,

Anche nel 2015 non ho avuto problemi con prop('selectedIndex', ...);(testato con Chrome e Firefox) la modifica della selezione.

— Lambart,

2

Per quello che vale, va sottolineato che qui stai facendo diversamente sta innescando un changeevento sul menu a discesa, che potrebbe anche essere una soluzione / soluzione alternativa utile per le persone che stanno cambiando la selezione chiamando prop('selectedIndex', ...), piuttosto che val(...). Forse il problema era che stai ascoltando un changeevento, e QUELLO è ciò che non ha funzionato per te? È vero che semplicemente cambiare l' property non genererà alcun evento ...

— Lambart,

9

sto usando

$('#elem').val('xyz');

per selezionare l'elemento opzione con valore = 'xyz'

— djs
fonte

9

Codice JQuery:

$("#sel_status").prop('selectedIndex',1);

Codice JSP:

Status:
<select name="sel_status"
    id="sel_status">
    <option value="1">-Status-</option>
    <option>ALL</option>
    <option>SENT</option>
    <option>RECEIVED</option>
    <option>DEACTIVE</option>
</select>

— Sathya
fonte

3

Vuoi prendere il valore della prima opzione nell'elemento select.

$("*[id$='" + originalId + "']").val($("*[id$='" + originalId + "'] option:first").attr('value'));

— MacAnthony
fonte

3

Per selezionare la seconda opzione

$('#your-select-box-id :nth-child(2)').prop('selected', true);

Qui aggiungiamo il `trigger ('change') per far scattare l'evento.

$('#your-select-box-id :nth-child(2)').prop('selected', true).trigger('change');

— Jarrod
fonte

questa è una risposta molto migliore.

— Ben Dehghan,

1

$("[id$='" + originalId + "']").val("0 index value");

lo imposterà su 0

— Josh Mein
fonte

1

Seleziona la 4a opzione

$('#select').val($('#select option').eq(3).val());

esempio su jsfiddle

— dabar
fonte

2

soluzione valida ... per un contest di code-offuscamento! :)

— Lambart,