Ik heb een vervolgkeuzelijst met bekende waarden. Wat ik probeer te doen, is de vervolgkeuzelijst instellen op een bepaalde waarde waarvan ik weet dat ik het jQuery gebruiken.
Gewone JavaScript gebruiken , ik zou iets doen als:

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

Ik moet dit echter doen met jQuery , omdat ik een CSS klasse voor mijn selector (stomme

Hoe kan ik het doen met jQuery ?

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

Documentatie Staten:

[jQuery.val] controleert, of selecteert, alle keuzerondjes, selectievakjes en selecteer opties die overeenkomen met de reeks waarden.

Dit gedrag is in jQueryversies 1.2en hoger.

Je wilt waarschijnlijk dit:

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

Antwoord 2, autoriteit 14%

Met verborgen veld moet je als volgt gebruiken:

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

of

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

Antwoord 3, autoriteit 3%

Ter informatie, je hoeft geen CSS-klassen te gebruiken om dit te bereiken.

U kunt de volgende regel code schrijven om de juiste besturingsnaam op de client te krijgen:

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

ASP.NET zal de controle-ID correct weergeven in de jQuery.

Antwoord 4, autoriteit 3%

Probeer het gewoon met

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

en niet met

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

Antwoord 5, autoriteit 3%

Deze oplossingen lijken ervan uit te gaan dat elk item in uw vervolgkeuzelijsten een val()-waarde heeft die betrekking heeft op hun positie in de vervolgkeuzelijst.

Het ligt iets ingewikkelder als dit niet het geval is.

Als u de geselecteerde index van een vervolgkeuzelijst wilt lezen, gebruikt u dit:

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

Om de geselecteerde index van een vervolgkeuzelijst in te stellen, gebruikt u dit:

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

Houd er rekening mee dat de functie prop()JQuery v1.6 of hoger vereist.

Laten we eens kijken hoe u deze twee functies zou gebruiken.

Stel dat u een vervolgkeuzelijst met maandnamen had.

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

Je zou een knop “Vorige maand” en “Volgende maand” kunnen toevoegen, die naar het momenteel geselecteerde item in de vervolgkeuzelijst kijkt en dit verandert in de vorige/volgende maand:

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

En hier is de JavaScript die deze knoppen zouden uitvoeren:

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

Mijn site is ook handig om te laten zien hoe je een vervolgkeuzelijst kunt vullen met JSON-gegevens:

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

Antwoord 6, autoriteit 2%

Na enkele oplossingen te hebben bekeken, werkte dit voor mij.

Ik heb één vervolgkeuzelijst met enkele waarden en ik wil dezelfde waarde selecteren in een andere vervolgkeuzelijst… Dus eerst plaats ik een variabele de selectIndexvan mijn eerste drop-downlijst -omlaag.

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

Vervolgens selecteer ik die index in mijn tweede vervolgkeuzelijst.

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

Opmerking:

Ik denk dat dit de kortste, betrouwbare, algemene en elegante oplossing is.

Omdat ik in mijn geval het gegevenskenmerk van de geselecteerde optie gebruik in plaats van het waardekenmerk.
Dus als je niet voor elke optie een unieke waarde hebt, is bovenstaande methode de kortste en makkelijkste!!

Antwoord 7, autoriteit 2%

Ik weet dat dit een oude vraag is en de bovenstaande oplossingen werken prima, behalve in sommige gevallen.

Vind ik leuk

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

Dus item 4 wordt weergegeven als “Geselecteerd” in de browser en nu wilt u de waarde wijzigen als 3 en “Item3” weergeven als geselecteerd in plaats van Item4. Dus volgens de bovenstaande oplossingen, als u

gebruikt

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

Je zult zien dat item 3 is geselecteerd in de browser. Maar wanneer je de gegevens in php of asp verwerkt, zul je de geselecteerde waarde als “4” vinden. De reden is dat je html er zo uit zal zien.

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

en het krijgt de laatste waarde als “4” in de taal van de server.

DUS MIJN LAATSTE OPLOSSING IN DIT AANGAANDE

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

BEWERK: voeg een enkel aanhalingsteken toe rond “+newselectedIndex+” zodat dezelfde functionaliteit kan worden gebruikt voor niet-numerieke waarden.

Dus wat ik doe is eigenlijk het geselecteerde kenmerk verwijderen en vervolgens het nieuwe maken zoals geselecteerd.

Ik zou het op prijs stellen opmerkingen hierover te krijgen van senior programmeurs zoals @strager , @y0mbo , @ISIK en anderen

Antwoord 8

Als we een vervolgkeuzelijst hebben met de titel “Gegevensclassificatie”:

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

We kunnen het in een variabele krijgen:

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

Voer vervolgens in een andere variabele de waarde in die we willen dat de vervolgkeuzelijst heeft:

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

Vervolgens kunnen we het veld gebruiken dat we in dataClsFieldhebben geplaatst, een zoekopdracht uitvoeren voor myValueen het selecteren met .prop():

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

Of u kunt gewoon .val()gebruiken, maar uw selector van .kan alleen worden gebruikt als deze overeenkomt met een klasse in de vervolgkeuzelijst, en u moet aanhalingstekens op de waarde tussen haakjes, of gebruik gewoon de variabele die we eerder hebben ingesteld:

dataClsField.val(myValue);

Antwoord 9

Dus ik heb het zo veranderd dat het nu
wordt uitgevoerd na 300 milliseconden met behulp van
time-out instellen. Het lijkt nu te werken.

Ik ben dit vaak tegengekomen bij het laden van gegevens van een Ajax-oproep. Ik gebruik ook .NET en het kost tijd om aan de clientId te wennen wanneer ik de jQuery-selector gebruik. Om het probleem dat u ondervindt te corrigeren en om te voorkomen dat u een eigenschap setTimeoutmoet toevoegen, kunt u eenvoudig “async: false” in de Ajax-aanroep plaatsen, en het zal geef de DOM voldoende tijd om de objecten terug te krijgen die u aan de selectie toevoegt. Een klein voorbeeld hieronder:

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

Antwoord 10

Ik gebruik een uitbreidingsfunctie om client-ID’s te krijgen, zoals:

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

Dan kun je ASP.NET-besturingselementen in jQuery als volgt aanroepen:

$.clientID("_statusDDL")

Antwoord 11

Een andere optie is om de controleparam ClientID=”Static” in .net in te stellen en dan heb je toegang tot het object in JQuery met de ID die je instelt.

Antwoord 12

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

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

Antwoord 13

Gewoon een opmerking – ik gebruik jokertekens selectors in jQuery om items te grijpen die versluierd zijn door ASP.NET-client-ID’s – dit kan u ook helpen:

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

Noteer de ID * Wildcard- dit vindt uw element zelfs als de naam is “CTL00 $ CTL00 $ ContentPlace Houding1 $ ContentPlace Houding1 $ MyDropdown”

Antwoord 14

Hoe laadt u de waarden in de vervolgkeuzelijst of het bepalen van welke waarde selecteert? Als u dit doet met AJAX, dan kan de reden dat u de vertraging nodig hebt voordat de selectie optreedt, omdat de waarden niet zijn geladen op het moment dat de in kwestie in kwestie wordt uitgevoerd. Dit zou ook verklaren waarom het werkte toen u een waarschuwingsverklaring op de lijn legt voordat u de status instelt, aangezien de waarschuwingsactie voldoende zou geven van een vertraging voor de gegevens om te laden.

Als u een van de AJAX-methoden van JQuery gebruikt, kunt u een callback-functie opgeven en vervolgens $("._statusDDL").val(2);in uw callback-functie.

Dit zou een betrouwbaardere manier zijn om het probleem te verwerken, omdat u er zeker van kunt zijn dat de methode uitgevoerd wanneer de gegevens gereed was, zelfs als het langer duurde dan 300 en NBSP; MS.

Antwoord 15

<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 = “statisch”

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

Antwoord 16

In mijn geval kon ik het werkend krijgen met de .attr()-methode.

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

Antwoord 17

Pure JS

Voor moderne browsersis het gebruik van CSS-selectors geen probleem voor pure JS

document.querySelector('._statusDDL').value = 2;