Modifica 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 valore particolare che conosco esiste usando jQuery . Usando JavaScript normale , farei qualcosa del tipo:

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

Tuttavia, devo farlo con jQuery , perché sto usando una classe CSS per il mio selettore (stupidi ID client ASP.NET ...).

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 inserisco un avviso appena sopra, funziona correttamente, ma quando rimuovo l'avviso e lo lascio funzionare alla massima velocità, viene visualizzato l'errore

Impossibile impostare la proprietà selezionata. Indice non valido

Non sono sicuro che si tratti di un bug con jQuery o Internet Explorer 6 (sto indovinando 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 all'insieme di valori.

Questo comportamento è nelle jQueryversioni 1.2e successive.

Molto probabilmente lo desideri:

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

Con il campo nascosto è necessario utilizzare in questo modo:

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

o

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

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

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

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

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

Prova con

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

e non con

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

Queste soluzioni sembrano presupporre che ogni elemento negli elenchi a discesa abbia un valore val () relativo alla loro posizione nell'elenco a discesa.

Le cose sono un po 'più complicate se non è così.

Per leggere l'indice selezionato di un elenco a discesa, utilizzare questo:

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

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

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

Nota che la funzione prop () richiede JQuery v1.6 o successive.

Vediamo come useresti queste due funzioni.

Supponiamo che tu abbia un elenco a discesa di nomi di mesi.

<select id="listOfMonths">
  <option id="JAN">January</option>
  <option id="FEB">February</option>
  <option id="MAR">March</option>
</select>

È possibile aggiungere un pulsante "Mese precedente" e "Mese successivo", che esamina l'elemento dell'elenco a discesa attualmente selezionato e lo cambia al mese precedente / successivo:

<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />

Ed ecco il JavaScript che questi pulsanti eseguiranno:

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 è utile anche per mostrare come popolare un elenco a discesa con i dati JSON:

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

Accidenti !!

Spero che sia di aiuto.

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 prima ho inserito in una variabile il selectIndexmio primo elenco 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 usando l'attributo data dell'opzione selezionata anziché l'attributo value. Quindi se non hai un valore univoco per ogni opzione, il metodo sopra è il più breve e dolce !!

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

Piace

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

Quindi l'articolo 4 verrà visualizzato come "Selezionato" nel browser e ora si desidera modificare il valore come 3 e mostrare "Articolo3" come selezionato anziché Articolo4. Quindi, come per le soluzioni di cui sopra, 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.

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3" selected="selected">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

e ottiene l'ultimo valore come "4" nel linguaggio secondario severo.

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 una virgoletta singola intorno a "+ newselectedIndex +" in modo che la stessa funzionalità possa essere utilizzata per valori non numerici.

Quindi quello che faccio è effettivamente, rimosso l'attributo selezionato e quindi crearne uno nuovo come selezionato.

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

Se abbiamo un menu a discesa con il titolo di "Classificazione dei dati":

<select title="Data Classification">
    <option value="Top Secret">Top Secret</option>
    <option value="Secret">Secret</option>
    <option value="Confidential">Confidential</option>
</select>

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 in cui ci troviamo dataClsField, fare una ricerca myValuee renderlo selezionato usando .prop():

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

Oppure, puoi semplicemente usare .val(), ma il tuo selettore di .può essere usato solo se corrisponde a una classe nel menu a discesa e dovresti usare le virgolette sul valore tra parentesi o semplicemente usare la variabile che abbiamo impostato in precedenza:

dataClsField.val(myValue);

Quindi l'ho cambiato in modo che ora venga eseguito dopo 300 millisecondi usando setTimeout. Sembra funzionare ora.

Mi sono imbattuto in molte volte durante il caricamento dei dati da una chiamata Ajax. Anch'io utilizzo .NET e ci vuole tempo per adattarsi al clientId quando si usa il selettore jQuery. Per correggere il problema che stai riscontrando ed evitare di aggiungere una setTimeoutproprietà, puoi semplicemente inserire " async: false" nella chiamata Ajax e darà al DOM il tempo sufficiente per riavere gli oggetti che stai aggiungendo alla selezione. Un piccolo esempio di seguito:

$.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(
                $('<option></option>').val(this.PageId).html(this.Name)
            );
        });
    }
});

Solo una nota: sto usando selettori di caratteri jolly in jQuery per afferrare elementi che sono offuscati dagli ID CLient ASP.NET, anche questo potrebbe aiutarti:

<asp:DropDownList id="MyDropDown" runat="server" />

$("[id* = 'MyDropDown']").append("<option value='-1'>&nbsp;</option>"); //etc

Nota l'id * jolly - questo troverà il tuo elemento anche se il nome è "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown"

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 è possibile accedere all'oggetto in JQuery tramite l'ID impostato.

<asp:DropDownList id="MyDropDown" runat="server" />

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

Come si caricano i valori nell'elenco a discesa o si determina quale valore selezionare? Se lo stai facendo usando Ajax, il motivo per cui hai bisogno del ritardo prima che si verifichi la selezione potrebbe essere perché 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 darebbe un ritardo sufficiente per il caricamento dei dati.

Se si utilizza uno dei metodi Ajax di jQuery, è possibile specificare una funzione di richiamata e quindi inserirla $("._statusDDL").val(2);nella funzione di richiamata.

Questo sarebbe un modo più affidabile di gestire il problema poiché potresti essere sicuro che il metodo eseguito quando i dati erano pronti, anche se impiegava più di 300 ms.

<asp:DropDownList ID="DropUserType" ClientIDMode="Static" runat="server">
     <asp:ListItem Value="1" Text="aaa"></asp:ListItem>
     <asp:ListItem Value="2" Text="bbb"></asp:ListItem>
</asp:DropDownList>

ClientIDMode = "Static"

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

Nel mio caso sono stato in grado di farlo funzionare usando il metodo .attr ().

$("._statusDDL").attr("selected", "");