Cambia il valore selezionato di un elenco a discesa con jQuery

Ho un elenco a discesa con valori noti. Quello che sto cercando di fare è impostare l’elenco a discesa su un particolare valore che so esistere usando jQuery. Usando il normale JavaScript, vorrei fare qualcosa come:

ddl = document.getElementById("ID of element goes here"); ddl.value = 2; // 2 being the value I want to set it too. 

Tuttavia, ho bisogno di farlo con jQuery, perché sto usando una class CSS per il mio selettore (id client ASP.NET stupidi …).

Ecco alcune cose che ho provato:

 $("._statusDDL").val(2); // Doesn't find 2 as a value. $("._statusDDL").children("option").val(2) // Also failed. 

Come posso farlo con jQuery?

Aggiornare

Quindi, a quanto pare, ho avuto ragione la prima volta con:

 $("._statusDDL").val(2); 

Quando metto un avviso appena sopra, funziona bene, ma quando rimuovo l’avviso e lo lascio girare alla massima velocità, ottengo l’errore

Imansible impostare la proprietà selezionata. Indice non valido

Non sono sicuro che si tratti di un bug con jQuery o Internet Explorer 6 (sto cercando Internet Explorer 6), ma è terribilmente fastidioso.

La documentazione di jQuery afferma:

[jQuery.val] controlla, o seleziona , tutti i pulsanti di opzione, le caselle di controllo e seleziona le opzioni che corrispondono al set di valori.

Questo comportamento è nelle versioni jQuery 1.2 e successive.

Molto probabilmente lo vuoi:

 $("._statusDDL").val('2'); 

Con il campo nascosto devi usare in questo modo:

 $("._statusDDL").val(2); $("._statusDDL").change(); 

o

 $("._statusDDL").val(2).change(); 

Solo una FYI, non è necessario utilizzare le classi CSS per realizzare questo.

È ansible scrivere la seguente riga di codice per ottenere il nome di controllo corretto sul client:

 $("#<%= statusDDL.ClientID %>").val("2"); 

ASP.NET renderà correttamente l’ID di controllo all’interno di jQuery.

Basta provare con

 $("._statusDDL").val("2"); 

e non con

 $("._statusDDL").val(2); 

Queste soluzioni sembrano presupporre che ciascun elemento nei propri elenchi a discesa abbia un valore val () relativo alla loro posizione nell’elenco a discesa.

Le cose sono un po ‘più complicate se questo non è il caso.

Per leggere l’indice selezionato di un elenco a discesa, dovresti usare questo:

 $("#dropDownList").prop("selectedIndex"); 

Per impostare l’indice selezionato di un elenco a discesa, dovresti utilizzare questo:

 $("#dropDownList").prop("selectedIndex", 1); 

Si noti che la funzione prop () richiede JQuery v1.6 o successivo.

Vediamo come useresti queste due funzioni.

Supponendo di avere un elenco a discesa dei nomi dei mesi.

  

È ansible aggiungere un pulsante “Mese precedente” e “Mese successivo”, che esamina la voce dell’elenco a discesa attualmente selezionata e la modifica al mese precedente / successivo:

   

Ed ecco il JavaScript che questi pulsanti avrebbero eseguito:

 function btnPrevMonth_Click() { var selectedIndex = $("#listOfMonths").prop("selectedIndex"); if (selectedIndex > 0) { $("#listOfMonths").prop("selectedIndex", selectedIndex - 1); } } function btnNextMonth_Click() { // Note: the JQuery "prop" function requires JQuery v1.6 or later var selectedIndex = $("#listOfMonths").prop("selectedIndex"); var itemsInDropDownList = $("#listOfMonths option").length; // If we're not already selecting the last item in the drop down list, then increment the SelectedIndex if (selectedIndex < (itemsInDropDownList - 1)) { $("#listOfMonths").prop("selectedIndex", selectedIndex + 1); } } 

Il seguente sito è anche utile, per mostrare come compilare un elenco a discesa con dati JSON:

http://mikesknowledgebase.com/pages/Services/WebServices-Page8.htm

Phew !!

Spero che questo ti aiuti.

Dopo aver esaminato alcune soluzioni, questo ha funzionato per me.

Ho un elenco a discesa con alcuni valori e voglio selezionare lo stesso valore da un altro elenco a discesa … Quindi per prima cosa inserisco una variabile selectIndex del mio primo selectIndex a discesa.

 var indiceDatos = $('#myidddl')[0].selectedIndex; 

Quindi, seleziono quell’indice nel mio secondo elenco a discesa.

 $('#myidddl2')[0].selectedIndex = indiceDatos; 

Nota:

Immagino che questa sia la soluzione più breve, affidabile, generale ed elegante.

Perché nel mio caso, sto utilizzando l’attributo dati dell’opzione selezionata anziché l’attributo valore. Quindi se non hai un valore univoco per ciascuna opzione, sopra il metodo è il più breve e dolce !!

So che questa è una vecchia domanda e le soluzioni di cui sopra funzionano bene, tranne in alcuni casi.

Piace

  

Quindi l’elemento 4 verrà visualizzato come “Selezionato” nel browser e ora si desidera modificare il valore come 3 e mostrare “Item3” come selezionato invece di Item4.So come da soluzioni precedenti, se si utilizza

 jQuery("#select_selector").val(3); 

Vedrai quell’articolo 3 come selezionato nel browser. Ma quando elabori i dati in php o asp, troverai il valore selezionato come “4”. Il motivo è che il tuo html sarà simile a questo.

  

e ottiene l’ultimo valore come “4” nella lingua lato sever.

Quindi la mia soluzione finale su questo punto

 newselectedIndex = 3; jQuery("#select_selector option:selected").removeAttr("selected"); jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected'); 

MODIFICA : aggiungi un solo preventivo intorno a “+ newselectedIndex +” in modo che la stessa funzionalità possa essere utilizzata per valori non numerici.

Quindi quello che faccio è in realtà, rimosso l’attributo selezionato e quindi rendere quello nuovo come selezionato.

Gradirei commenti su questo da programmatori esperti come @strager, @ y0mbo, @ISIK e altri

Se abbiamo un menu a discesa con un titolo di “Classificazione dati”:

  

Possiamo inserirlo in una variabile:

 var dataClsField = $('select[title="Data Classification"]'); 

Quindi inserisci in un’altra variabile il valore che vogliamo che il menu a discesa abbia:

 var myValue = "Top Secret"; // this would have been "2" in your example 

Quindi possiamo usare il campo che abbiamo inserito in dataClsField , fare una ricerca per myValue e renderlo selezionato usando .prop() :

 dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected'); 

Oppure puoi usare .val() , ma il tuo selezionatore di . può essere utilizzato solo se corrisponde a una class nel menu a discesa e devi utilizzare le virgolette sul valore racchiuso tra parentesi o utilizzare semplicemente la variabile impostata in precedenza:

 dataClsField.val(myValue); 

Così l’ho cambiato in modo che ora venga eseguito dopo 300 millisecondi usando setTimeout. Sembra che funzioni adesso.

Mi sono imbattuto in questo molte volte durante il caricamento dei dati da una chiamata Ajax. Anch’io uso .NET, e ci vuole tempo per essere adattato al clientId quando si utilizza il selettore jQuery. Per correggere il problema che stai avendo e per evitare di dover aggiungere una proprietà setTimeout , puoi semplicemente mettere ” async: false ” nella chiamata Ajax, e darà al DOM abbastanza tempo per riavere gli oggetti che stai aggiungendo alla selezione. Un piccolo esempio qui sotto:

 $.ajax({ type: "POST", url: document.URL + '/PageList', data: "{}", async: false, contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { var pages = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d; $('#locPage' + locId).find('option').remove(); $.each(pages, function () { $('#locPage' + locId).append( $('').val(this.PageId).html(this.Name) ); }); } }); 

Solo una nota: ho utilizzato selettori di caratteri jolly in jQuery per afferrare gli elementi che sono stati oscurati dagli ID di CLI di ASP.NET: questo potrebbe aiutarti anche tu:

  $("[id* = 'MyDropDown']").append(""); //etc 

Nota il carattere jolly * * che troverà il tuo elemento anche se il nome è “ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown”

Io uso una funzione di estensione per ottenere gli ID client, in questo modo:

 $.extend({ clientID: function(id) { return $("[id$='" + id + "']"); } }); 

Quindi puoi chiamare i controlli ASP.NET in jQuery in questo modo:

 $.clientID("_statusDDL") 

Un’altra opzione è quella di impostare il parametro di controllo ClientID = “Statico” in .net e quindi è ansible accedere all’object in JQuery tramite l’ID impostato.

Come stai caricando i valori nell’elenco a discesa o determinando quale valore selezionare? Se si esegue questa operazione utilizzando Ajax, il motivo per cui è necessario il ritardo prima della selezione potrebbe essere dovuto al fatto che i valori non sono stati caricati nel momento in cui la riga in questione è stata eseguita. Ciò spiegherebbe anche perché ha funzionato quando si inserisce un’istruzione di avviso sulla linea prima di impostare lo stato poiché l’azione di avviso fornirebbe un ritardo sufficiente per il caricamento dei dati.

Se si utilizza uno dei metodi Ajax di jQuery, è ansible specificare una funzione di callback e quindi inserire $("._statusDDL").val(2); nella tua funzione di callback.

Questo sarebbe un modo più affidabile di gestire il problema poiché si potrebbe essere sicuri che il metodo sia stato eseguito quando i dati erano pronti, anche se richiedeva più di 300 ms.

  

Usa $("select[name$='MyDropDown']").val() .

     

ClientIDMode = “Static”

 $('#DropUserType').val('1');