javascript - Endre den valgte verdien i en nedtrekksliste med jQuery

Jeg har en rullegardinliste med kjente verdier. Det jeg prøver å gjøre er å sette rullegardinlisten til en bestemt verdi som jeg vet eksisterer ved å bruke jQuery. Med vanlig JavaScript ville jeg gjort noe som:

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

Men jeg må gjøre dette med jQuery, fordi jeg bruker en CSS-klasse for velgeren min (dumme ASP.NET-klient-ID-er...).

Her er noen ting jeg har prøvd:

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

Hvordan kan jeg gjøre det med jQuery?

Oppdatering

Så det viser seg at jeg hadde rett første gangen med:

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

Når jeg setter en alert rett over, fungerer det fint, men når jeg fjerner alerten og lar det kjøre på full hastighet, får jeg feilen

Kunne ikke sette den valgte egenskapen. Ugyldig indeks

Jeg er ikke sikker på om det er en feil med jQuery eller Internet Explorer 6 (jeg gjetter på Internet Explorer 6), men det er utrolig irriterende.

Svar #1

jQuerys dokumentasjon sier:

[jQuery.val] sjekker, eller velger, alle radioknapper, avkrysningsbokser og valgmenyalternativer som samsvarer med settet med verdier.

Denne oppførselen finnes i jQuery-versjoner 1.2 og nyere.

Du vil mest sannsynlig ha dette:

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

Legg til .change() for å se valget i nedtrekkslisten på frontend:

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

Svar #2

Med skjult felt må du bruke det slik:

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

eller

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

Svar #3

Disse løsningene ser ut til å anta at hvert element i rullegardinlistene dine har en val()-verdi som relaterer seg til posisjonen deres i rullegardinlisten.

Ting er litt mer komplisert hvis dette ikke er tilfelle.

For å lese den valgte indeksen i en rullegardinliste, vil du bruke dette:

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

For å sette den valgte indeksen i en rullegardinliste, vil du bruke dette:

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

Merk at prop()-funksjonen krever JQuery v1.6 eller nyere.

La oss se hvordan du ville bruke disse to funksjonene.

Forutsatt at du hadde en rullegardinliste med månedsnavn.

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

Du kan legge til en "Forrige måned"- og "Neste måned"-knapp, som ser på det for øyeblikket valgte elementet i rullegardinlisten, og endrer det til forrige/neste måned:

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

Og her er JavaScripten som disse knappene ville kjøre:

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);
    }
}

Nettstedet mitt er også nyttig for å vise hvordan man fyller en rullegardinliste med JSON-data:

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

Svar #4

Bare til informasjon, du trenger ikke å bruke CSS-klasser for å oppnå dette.

Du kan skrive følgende kodelinje for å få riktig kontrollnavn på klienten:

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

ASP.NET vil gjengi kontroll-IDen riktig inne i jQuery.

Svar #5

Bare prøv med

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

og ikke med

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

Svar #6

Etter å ha sett på noen løsninger, fungerte dette for meg.

Jeg har en rullegardinliste med noen verdier, og jeg vil velge den samme verdien fra en annen rullegardinliste... Så først legger jeg i en variabel selectIndex for min første rullegardinliste.

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

Deretter velger jeg den indeksen i min andre rullegardinliste.

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

Merk:

Jeg antar at dette er den korteste, pålitelige, generelle og elegante løsningen.

Fordi i mitt tilfelle bruker jeg den valgte alternativets dataattributt i stedet for verdiattributtet. Så hvis du ikke har unik verdi for hvert alternativ, er metoden ovenfor den korteste og beste!!

Svar #7

Jeg vet at dette er et gammelt spørsmål, og løsningene ovenfor fungerer bra bortsett fra i noen tilfeller.

Liker

<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>

Så Element 4 vil vises som "Valgt" i nettleseren, og nå vil du endre verdien til 3 og vise "Element3" som valgt i stedet for Element4. Så i henhold til løsningene ovenfor, hvis du bruker

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

Du vil se at Element 3 er valgt i nettleseren. Men når du behandler dataene enten i php eller asp, vil du finne at den valgte verdien er "4". Årsaken er at HTML-en din vil se slik ut.

<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>

og den får den siste verdien som "4" i serversidespråket.

SÅ MIN ENDELIGE LØSNING I DENNE HENSYN

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

REDIGER: Legg til enkelt anførselstegn rundt "+newselectedIndex+" slik at den samme funksjonaliteten kan brukes for ikke-numeriske verdier.

Så det jeg gjør er egentlig å fjerne det valgte attributtet og deretter gjøre det nye som valgt.

Jeg ville satt pris på kommentarer på dette fra seniorprogrammerere som @strager, @y0mbo, @ISIK og andre

Svar #8

Hvis vi har en rullegardinmeny med tittelen «Dataklassifisering»:

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

Vi kan få det inn i en variabel:

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

Deretter legger vi i en annen variabel verdien vi ønsker at rullegardinmenyen skal ha:

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

Da kan vi bruke feltet vi la inn i dataClsField, gjøre et søk etter myValue og gjøre det valgt ved å bruke .prop():

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

Eller, du kan bare bruke .val(), men selektoren din . kan bare brukes hvis den matcher en klasse på rullegardinmenyen, og du bør bruke sitater rundt verdien inni parentesen, eller bare bruke variabelen vi satte tidligere:

dataClsField.val(myValue);

Relaterte artikler