JQuery ile açılır listenin seçilen değerini değiştirme

Bilinen değerler içeren bir açılır listem var. Ne yapmaya çalışıyorum açılır liste jQuery kullanarak var olduğunu bildiğim belirli bir değere ayarlamaktır . Normal JavaScript kullanarak , şöyle bir şey yaparım:

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

Ancak, benim seçici (aptal ASP.NET istemci kimlikleri ...) için bir CSS sınıfı kullandığım için jQuery ile bunu yapmak gerekir .

İşte denediğim birkaç şey:

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

JQuery ile nasıl yapabilirim ?

Güncelleme

Görünüşe göre, ilk kez doğru yaptım:

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

Hemen üstüne bir uyarı koyduğumda iyi çalışıyor, ancak uyarıyı kaldırdığımda ve tam hızda çalışmasına izin verdiğimde hatayı alıyorum

Seçilen özellik ayarlanamadı. Geçersiz Dizin

JQuery veya Internet Explorer 6 (Internet Explorer 6'yı tahmin ediyorum) ile ilgili bir hata olup olmadığından emin değilim , ancak çok can sıkıcı.

jQuery belgeleri şunları belirtir:

[jQuery.val] , tüm radyo düğmelerini, onay kutularını ve değer kümesiyle eşleşen seçenekleri kontrol eder veya seçer .

Bu davranış jQuerysürümleri 1.2ve üstündedir.

Büyük olasılıkla bunu istiyorsunuz:

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

Gizli alanla şu şekilde kullanmanız gerekir:

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

veya

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

Sadece bir FYI, bunu başarmak için CSS sınıflarını kullanmanıza gerek yok.

İstemcide doğru denetim adını almak için aşağıdaki kod satırını yazabilirsiniz:

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

ASP.NET denetim kimliğini jQuery içinde doğru şekilde oluşturur.

Sadece dene

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

ve ile değil

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

Bu çözümler, açılır listelerinizdeki her bir öğenin açılır listedeki konumlarıyla ilgili bir val () değerine sahip olduğunu varsayar .

Durum böyle değilse işler biraz daha karmaşıktır.

To okumak bir damla listeden seçilen endeksi, bu kullanırsınız:

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

To set bir damla listeden seçilen endeksi, bu kullanırsınız:

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

Prop () özelliğinin JQuery v1.6 veya üst sürümünü gerektirdiğini unutmayın .

Bu iki işlevi nasıl kullanacağınızı görelim.

Varsayalım ki aşağı açılan bir ay adı listeniz var.

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

Şu anda seçili olan açılır liste öğesine bakan ve önceki / sonraki aya değiştiren bir "Önceki Ay" ve "Gelecek Ay" düğmesi ekleyebilirsiniz:

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

İşte bu düğmelerin çalışacağı JavaScript:

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

Aşağıdaki site, bir açılır listenin JSON verileriyle nasıl doldurulacağını göstermek için de kullanışlıdır:

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

Vay !!

Bu yardımcı olur umarım.

Bazı çözümlere baktıktan sonra bu benim için çalıştı.

Bazı değerleri olan bir açılır liste var ve başka bir açılır listeden aynı değeri seçmek istiyorum ... Bu yüzden ilk selectIndexbenim ilk açılan bir değişken koymak .

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

Ardından, ikinci açılır listemde bu dizini seçiyorum.

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

Not:

Sanırım bu en kısa, güvenilir, genel ve zarif çözüm.

Çünkü benim durumumda, değer özniteliği yerine seçilen seçeneğin veri özniteliğini kullanıyorum. Her seçenek için benzersiz bir değeriniz yoksa, yukarıdaki yöntem en kısa ve tatlıdır!

Bu eski bir soru ve yukarıdaki çözümler bazı durumlar dışında iyi çalışıyor biliyorum.

Sevmek

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

Öyleyse, Öğe 4 tarayıcıda "Seçili" olarak gösterilir ve şimdi değeri 3 olarak değiştirmek ve Öğe4 yerine "Öğe3" seçili olarak göstermek istiyorsanız, yukarıdaki çözümlere göre

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

Tarayıcıda seçili olarak Öğe 3'ü göreceksiniz.Ancak verileri php veya asp olarak işlediğinizde, seçilen değeri "4" olarak bulacaksınız.

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

ve sever tarafı dilinde son değeri "4" olarak alır.

BU NEDENLE NİÇİN ÇÖZÜMÜM

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

DÜZENLEME : Sayısal olmayan değerler için aynı işlevselliğin kullanılabilmesi için "+ newselectedIndex +" çevresine tek tırnak ekleyin.

Yaptığım şey aslında, seçilen özniteliği kaldırmak ve sonra yeni olanı seçilen olarak yapmak.

@Strager, @ y0mbo, @ISIK ve diğerleri gibi kıdemli programcıların yorumlarıyla ilgili minnettar olurum

"Veri Sınıflandırması" başlıklı bir açılır listemiz varsa:

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

Bunu bir değişkene alabiliriz:

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

Ardından, açılır listenin sahip olmasını istediğimiz değeri başka bir değişkene koyun:

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

Ardından dataClsField, içine koyduğumuz alanı kullanabilir, bulup myValueyapabilir ve aşağıdakileri kullanarak seçilebilir yapabiliriz .prop():

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

Veya sadece kullanabilirsiniz .val(), ancak seçiciniz .yalnızca açılır menüdeki bir sınıfla eşleşiyorsa kullanılabilir ve parantez içindeki değerde tırnak işareti kullanmanız veya daha önce ayarladığımız değişkeni kullanmanız gerekir:

dataClsField.val(myValue);

Bu yüzden şimdi setTimeout kullanarak 300 milisaniye sonra yürütecek şekilde değiştirdim. Şimdi çalışıyor gibi görünüyor.

Bir Ajax çağrısından veri yüklerken bunu birçok kez çalıştırdım. Ben de .NET kullanın ve jQuery seçici kullanırken clientId ayarlanması zaman alır. Yaşadığınız sorunu düzeltmek ve bir setTimeoutözellik eklemek zorunda kalmamak async: falseiçin Ajax çağrısına " " koyabilirsiniz ve DOM'a seçime eklediğiniz nesnelere geri dönmesi için yeterli zaman tanır. Aşağıda küçük bir örnek:

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

Sadece bir not - ASP.NET CLIent kimlikleri tarafından gizlenen öğeleri kapmak için jQuery joker karakter seçiciler kullanıyorum - bu da size yardımcı olabilir:

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

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

* Wildcard- kimliğine dikkat edin, ad "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown" olsa bile öğenizi bulur.

Ben gibi istemci kimlikleri almak için bir genişletme işlevi kullanın:

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

Sonra jQuery'de ASP.NET denetimlerini şöyle çağırabilirsiniz:

$.clientID("_statusDDL")

Başka bir seçenek .net içindeki ClientID = "Statik" denetim parametresini ayarlamak ve sonra ayarladığınız kimlikle JQuery'deki nesneye erişebilirsiniz.

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

Kullanın $("select[name$='MyDropDown']").val().

Değerleri açılır listeye nasıl yüklüyorsunuz veya hangi değeri seçeceğinizi nasıl belirliyorsunuz? Bunu Ajax kullanarak yapıyorsanız, seçim yapılmadan önce gecikmeye ihtiyaç duymanızın nedeni, söz konusu satırın yürütüldüğü sırada değerlerin yüklenmemiş olması olabilir. Bu ayrıca, uyarı eylemi verilerin yüklenmesi için yeterince gecikme sağlayacağından, durumu ayarlamadan önce hatta bir uyarı ifadesi koyduğunuzda neden çalıştığını da açıklayacaktır.

JQuery'nin Ajax yöntemlerinden birini kullanıyorsanız, bir geri arama işlevi belirtebilir ve ardından $("._statusDDL").val(2); .

Bu, 300 ms'den daha uzun sürse bile veriler hazır olduğunda uygulanan yöntemin olduğundan emin olabileceğinizden, sorunu ele almanın daha güvenilir bir yolu olacaktır.

<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 = "Statik"

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

Benim durumumda .attr () yöntemini kullanarak çalıştırabildim.

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