Thay đổi giá trị được chọn của danh sách thả xuống với jQuery

Tôi có một danh sách thả xuống với các giá trị đã biết. Những gì tôi đang cố gắng làm là đặt danh sách thả xuống thành một giá trị cụ thể mà tôi biết tồn tại bằng jQuery . Sử dụng JavaScript thông thường , tôi sẽ làm một cái gì đó như:

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

Tuy nhiên, tôi cần phải làm điều này với jQuery , vì tôi đang sử dụng một lớp CSS cho bộ chọn của mình ( id máy khách ASP.NET ngu ngốc ...).

Dưới đây là một vài điều tôi đã thử:

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

Làm thế nào tôi có thể làm điều đó với jQuery ?

Cập nhật

Vì vậy, khi nó bật ra, tôi đã có nó ngay lần đầu tiên với:

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

Khi tôi đặt một cảnh báo ngay phía trên nó hoạt động tốt, nhưng khi tôi loại bỏ cảnh báo và để nó chạy ở tốc độ tối đa, tôi gặp lỗi

Không thể đặt thuộc tính được chọn. Chỉ mục không hợp lệ

Tôi không chắc đó là lỗi với jQuery hay Internet Explorer 6 (Tôi đoán Internet Explorer 6 ), nhưng nó cực kỳ khó chịu.

Tài liệu của jQuery nêu rõ:

[jQuery.val] kiểm tra hoặc chọn , tất cả các nút radio, hộp kiểm và chọn tùy chọn khớp với bộ giá trị.

Hành vi này là trong jQuerycác phiên bản 1.2và ở trên.

Bạn rất có thể muốn điều này:

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

Với trường ẩn bạn cần sử dụng như thế này:

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

hoặc là

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

Chỉ là một FYI, bạn không cần sử dụng các lớp CSS để thực hiện điều này.

Bạn có thể viết dòng mã sau đây để có được tên điều khiển chính xác trên máy khách:

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

ASP.NET sẽ kết xuất ID điều khiển chính xác bên trong jQuery.

Chỉ cần thử với

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

và không phải với

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

Các giải pháp này dường như giả định rằng mỗi mục trong danh sách thả xuống của bạn có giá trị val () liên quan đến vị trí của chúng trong danh sách thả xuống.

Mọi thứ phức tạp hơn một chút nếu đây không phải là trường hợp.

Để đọc chỉ mục được chọn của danh sách thả xuống, bạn sẽ sử dụng:

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

Để đặt chỉ mục đã chọn của danh sách thả xuống, bạn sẽ sử dụng:

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

Lưu ý rằng tính năng prop () yêu cầu JQuery v1.6 trở lên.

Hãy xem cách bạn sẽ sử dụng hai chức năng này.

Giả sử bạn có một danh sách tên tháng.

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

Bạn có thể thêm nút "Tháng trước" và "Tháng tiếp theo", xem mục danh sách thả xuống hiện đang được chọn và thay đổi nó thành tháng trước / tháng tiếp theo:

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

Và đây là JavaScript mà các nút này sẽ chạy:

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

Trang web sau đây cũng hữu ích, để hiển thị cách điền danh sách thả xuống với dữ liệu JSON:

http://mikeledgeledridease.com/pages/Service/WebService-Page8.htm

Phù !!

Hi vọng điêu nay co ich.

Sau khi xem xét một số giải pháp, điều này làm việc cho tôi.

Tôi có một danh sách thả xuống với một số giá trị và tôi muốn chọn cùng một giá trị từ danh sách thả xuống khác ... Vì vậy, trước tiên tôi đặt vào một biến selectIndex thả xuống đầu tiên của mình.

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

Sau đó, tôi chọn chỉ mục đó trong danh sách thả xuống thứ hai của mình.

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

Ghi chú:

Tôi đoán đây là giải pháp ngắn nhất, đáng tin cậy, chung chung và thanh lịch.

Bởi vì trong trường hợp của tôi, tôi đang sử dụng thuộc tính dữ liệu của tùy chọn đã chọn thay vì thuộc tính value. Vì vậy, nếu bạn không có giá trị duy nhất cho mỗi tùy chọn, phương pháp trên là ngắn nhất và ngọt ngào !!

Tôi biết đây là một câu hỏi cũ và các giải pháp trên hoạt động tốt, ngoại trừ trong một số trường hợp.

Giống

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

Vì vậy, Mục 4 sẽ hiển thị là "Đã chọn" trong trình duyệt và bây giờ bạn muốn thay đổi giá trị là 3 và hiển thị "Mục 3" như đã chọn thay vì Mục 4. Theo các giải pháp trên, nếu bạn sử dụng

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

Bạn sẽ thấy Mục 3 như được chọn trong trình duyệt. Nhưng khi bạn xử lý dữ liệu bằng php hoặc asp, bạn sẽ tìm thấy giá trị được chọn là "4". Lý do là, html của bạn sẽ như thế này.

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

và nó nhận giá trị cuối cùng là "4" trong ngôn ngữ bên sever.

VÌ GIẢI PHÁP CUỐI CÙNG CỦA TÔI VỀ BAN NÀY

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

BIÊN TẬP : Thêm một trích dẫn xung quanh "+ newselected Index +" để có thể sử dụng cùng chức năng cho các giá trị không phải là số.

Vì vậy, những gì tôi làm là thực sự, loại bỏ thuộc tính được chọn và sau đó làm cho thuộc tính mới như đã chọn.

Tôi sẽ đánh giá cao ý kiến ​​về điều này từ các lập trình viên cao cấp như @strager, @ y0mbo, @ISIK và những người khác

Nếu chúng tôi có danh sách thả xuống với tiêu đề "Phân loại dữ liệu":

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

Chúng ta có thể biến nó thành một biến:

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

Sau đó đưa vào một biến khác giá trị mà chúng ta muốn thả xuống có:

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

Sau đó, chúng tôi có thể sử dụng trường chúng tôi đưa vào dataClsField, tìm kiếm myValuevà chọn nó bằng cách sử dụng .prop():

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

Hoặc, bạn chỉ có thể sử dụng .val(), nhưng bộ chọn của .bạn chỉ có thể được sử dụng nếu nó phù hợp với một lớp trên danh sách thả xuống và bạn nên sử dụng dấu ngoặc kép trên giá trị bên trong dấu ngoặc đơn hoặc chỉ sử dụng biến chúng ta đã đặt trước đó:

dataClsField.val(myValue);

Vì vậy, tôi đã thay đổi nó để bây giờ nó thực thi sau 300 triệu giây sử dụng setTimeout. Có vẻ như đang làm việc bây giờ.

Tôi đã gặp phải điều này nhiều lần khi tải dữ liệu từ một cuộc gọi Ajax. Tôi cũng sử dụng .NET và cần có thời gian để điều chỉnh clientId khi sử dụng bộ chọn jQuery. Để khắc phục sự cố mà bạn gặp phải và để tránh phải thêm thuộc setTimeouttính, bạn chỉ cần đặt " async: false" trong lệnh gọi Ajax và nó sẽ cung cấp cho DOM đủ thời gian để đưa các đối tượng trở lại mà bạn đang thêm vào lựa chọn. Một mẫu nhỏ dưới đây:

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

Chỉ là một lưu ý - Tôi đã sử dụng các bộ chọn ký tự đại diện trong jQuery để lấy các mục bị ẩn bởi ID ASP.NET CLient - điều này cũng có thể giúp bạn:

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

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

Lưu ý id * wildcard- cái này sẽ tìm thấy phần tử của bạn ngay cả khi tên đó là "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown"

Tôi sử dụng chức năng mở rộng để lấy id khách hàng, như vậy:

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

Sau đó, bạn có thể gọi các điều khiển ASP.NET trong jQuery như thế này:

$.clientID("_statusDDL")

Một tùy chọn khác là đặt điều khiển param ClientID = "Tĩnh" trong .net và sau đó bạn có thể truy cập đối tượng trong JQuery bằng ID bạn đặt.

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

Sử dụng $("select[name$='MyDropDown']").val().

Làm thế nào để bạn tải các giá trị vào danh sách thả xuống hoặc xác định giá trị nào sẽ chọn? Nếu bạn đang thực hiện việc này bằng Ajax, thì lý do bạn cần độ trễ trước khi lựa chọn xảy ra có thể là do các giá trị không được tải vào thời điểm mà dòng trong câu hỏi được thực thi. Điều này cũng sẽ giải thích lý do tại sao nó hoạt động khi bạn đặt một cảnh báo trên dòng trước khi đặt trạng thái vì hành động cảnh báo sẽ cung cấp đủ độ trễ cho dữ liệu tải.

Nếu bạn đang sử dụng một trong các phương thức Ajax của jQuery, bạn có thể chỉ định hàm gọi lại và sau đó đưa $("._statusDDL").val(2);vào hàm gọi lại.

Đây sẽ là một cách đáng tin cậy hơn để xử lý vấn đề vì bạn có thể chắc chắn rằng phương thức được thực thi khi dữ liệu đã sẵn sàng, ngay cả khi mất nhiều thời gian hơn 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 = "Tĩnh"

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

Trong trường hợp của tôi, tôi đã có thể làm cho nó hoạt động bằng phương thức .attr ().

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