javascript - remove - select set jquery




使用jQuery更改下拉列表的選定值 (10)

我有一個已知值的下拉列表。 我想要做的是將下拉列表設置為我知道使用jQuery存在的特定值。 使用普通的JavaScript,我會做類似的事情:

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

不過,我需要用jQuery來做這件事,因為我為我的選擇器使用了CSS類(愚蠢的ASP.NET客戶端ID)。

以下是我嘗試過的一些事情:

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

我怎樣才能用jQuery來做到這一點?

更新

事實證明,我第一次做到了:

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

當我在上面放置警報時,它工作正常,但是當我刪除警報並讓它全速運行時,我收到錯誤消息

無法設置選定的屬性。 索引無效

我不確定這是否是jQuery或Internet Explorer 6(我猜IE瀏覽器6)的bug,但這非常煩人。


所以我改變了它,現在它使用setTimeout在300毫秒後執行。 似乎現在正在工作。

從Ajax調用中加載數據時,我遇到過這麼多次。 我也使用.NET,並且使用jQuery選擇器時需要時間調整到clientId。 為了解決你遇到的問題,並避免增加一個setTimeout屬性,你可以簡單地在Ajax調用中放置“ async: false ”,它會給DOM足夠的時間讓你添加對象到選擇。 以下是一個小樣本:

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

jQuery的文檔指出:

[jQuery.val]檢查或選擇與這組值相匹配的所有單選按鈕,複選框和選擇選項。

這個行為在jQuery版本1.2及以上。

你很可能想要這樣的:

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

僅供參考,您不需要使用CSS類來完成此任務。

您可以編寫以下代碼行以在客戶端上獲取正確的控件名稱:

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

ASP.NET將在jQuery中正確呈現控件ID。


另一種選擇是在.net中設置控制參數ClientID =“Static”,然後您可以通過您設置的ID訪問JQuery中的對象。


我使用擴展函數來獲取客戶端ID,如下所示:

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

然後你可以像這樣在jQuery中調用ASP.NET控件:

$.clientID("_statusDDL")

我知道這是一個老問題,上述解決方案在一些情況下工作正常。

喜歡

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

因此,第4項將在瀏覽器中顯示為“選定”,現在您想將值更改為3,並按照上述解決方案將“Item3”顯示為選中項而不是Item4.So,如果您使用

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

您會在瀏覽器中看到第3項。但是,當您使用php或asp處理數據時,您會發現所選值為“4”。原因是,您的html將如下所示。

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

並以嚴重的側語獲得最後的值為“4”。

因此,我的最終解決方案就是這樣

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

編輯 :圍繞“+ newselectedIndex +”添加單引號,以便相同的功能可用於非數字值。

所以我做的是實際上,刪除選定的屬性,然後選擇新的屬性。

我會很感激@strager,@ y0mbo,@ISIK等高級程序員對此的評論


看了一些解決方案後,這對我有用。

我有一個帶有一些值的下拉列表,我想從另一個下拉列表中選擇相同的值...因此,首先我將一個變量放入第一個下拉列表的selectIndex中。

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

然後,我在第二個下拉列表中選擇該索引。

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

注意:

我想這是最短的,可靠的,一般的和優雅的解決方案。

因為在我的情況下,我正在使用選定選項的數據屬性而不是value屬性。 所以如果你對每個選項沒有獨特的價值,上面的方法是最短和最甜蜜的!


試試吧

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

而不是與

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

這些解決方案似乎假定下拉列表中的每個項目都有一個val()值,與它們在下拉列表中的位置相關。

如果情況並非如此,事情會更複雜一些。

讀取下拉列表中選定的索引,您可以使用以下命令:

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

設置下拉列表的選定索引,您可以使用以下命令:

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

請注意, prop()功能需要JQuery v1.6或更高版本。

讓我們看看你將如何使用這兩個函數。

假設你有一個下拉列表的月份名稱。

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

您可以添加一個“上個月”和“下個月”按鈕,該按鈕查看當前選中的下拉列表項,並將其更改為前一個/下一個月:

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

以下是這些按鈕可以運行的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);
    }
}

下面的網站也非常有用,用於展示如何用JSON數據填充下拉列表:

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

唷!

希望這可以幫助。


<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 =“靜態”

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




html-select