Làm cách nào tôi có thể đặt giá trị của DropDownList bằng jQuery?

Như câu hỏi đã nói, làm cách nào để đặt giá trị của điều khiển DropDownList bằng jQuery?

$("#mydropdownlist").val("thevalue");

chỉ cần đảm bảo giá trị trong các thẻ tùy chọn khớp với giá trị trong phương thức val.

Nếu bạn làm việc với chỉ mục, bạn có thể đặt chỉ mục được chọn trực tiếp bằng .attr ():

$("#mydropdownlist").attr('selectedIndex', 0);

Điều này sẽ đặt nó thành giá trị đầu tiên trong bộ nhỏ giọt.

Biên tập: Cách tôi đã làm ở trên được sử dụng để làm việc. Nhưng có vẻ như nó không còn nữa.

Nhưng như Han rất vui lòng chỉ ra trong các bình luận, cách chính xác để làm điều đó là:

$("#mydropdownlist").get(0).selectedIndex = index_here;

Theo đề xuất của @Nick Berardi, nếu giá trị thay đổi của bạn không được phản ánh trên giao diện người dùng, hãy thử:

$("#mydropdownlist").val("thevalue").change();

Hãy thử phương pháp rất đơn giản này:

/*make sure that value is included in the options value of the dropdownlist 
e.g. 
(<select><option value='CA'>California</option><option value='AK'>Alaska</option>      </select>)
*/

$('#mycontrolId').val(myvalue).attr("selected", "selected");

Nếu danh sách thả xuống của bạn là Asp.Net thả xuống thì mã bên dưới sẽ hoạt động tốt,

 $("#<%=DropDownName.ClientID%>")[0].selectedIndex=0;

Nhưng nếu DropDown của bạn là HTML thả xuống thì mã này sẽ hoạt động.

 $("#DropDownName")[0].selectedIndex=0;

Câu trả lời hay nhất cho câu hỏi:

$("#comboboxid").val(yourvalue).trigger("chosen:updated");

ví dụ:

$("#CityID").val(20).trigger("chosen:updated");

hoặc là

$("#CityID").val("chicago").trigger("chosen:updated");

thiết lập giá trị và cập nhật sự kiện danh sách thả xuống

$("#id").val("1234").change();

Có rất nhiều cách để làm điều đó. Dưới đây là một số trong số họ:

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

HOẶC LÀ

$('select').prop('selectedIndex', 3);

Tôi nghĩ rằng điều này có thể giúp:

    $.getJSON('<%= Url.Action("GetDepartment") %>', 
              { coDepartment: paramDepartment },
              function(data) {
                    $(".autoCompleteDepartment").empty();
                    $(".autoCompleteDepartment").append($("<option />").val(-1));
                    $.each(data, function() {
                        $(".autoCompleteDepartment").append($("<option />").val(this.CodDepartment).text(this.DepartmentName));
                    });
                    $(".autoCompleteDepartment").val(-1);                                       
              }  
             );

Nếu bạn làm theo cách này, bạn thêm một yếu tố không có văn bản. Vì vậy, khi bạn nhấp vào kết hợp, nó sẽ không xuất hiện, nhưng giá trị -1 bạn đã thêm một lựa chọn sau với $ (". AutoCompleteDep ngăn"). Val (-1); cho phép bạn kiểm soát nếu kết hợp có giá trị hợp lệ.

Hy vọng nó sẽ giúp được ai.

Xin lỗi vì tiếng Anh của tôi.

Nếu bạn chỉ cần đặt giá trị của danh sách thả xuống thì cách tốt nhất là

$("#ID").val("2");

Nếu bạn phải kích hoạt bất kỳ tập lệnh nào sau khi cập nhật giá trị thả xuống như Nếu bạn đặt bất kỳ sự kiện onChange nào trên danh sách thả xuống và bạn muốn chạy tập lệnh này sau khi cập nhật danh sách thả xuống hơn Bạn cần sử dụng như thế này

$("#ID").val("2").change();

Đây là một chức năng được thực hiện để nhanh chóng thiết lập tùy chọn đã chọn:

function SetSelected(elem, val){
        $('#'+elem+' option').each(function(i,d){
        //  console.log('searching match for '+ elem + '  ' + d.value + ' equal to '+ val);
            if($.trim(d.value).toLowerCase() == $.trim(val).toLowerCase()){
        //      console.log('found match for '+ elem + '  ' + d.value);
                $('#'+elem).prop('selectedIndex', i);
            }
        });
    }

Gọi hàm này với id phần tử đối số và giá trị được chọn; như thế này:

SetSelected('selectID','some option');

Nó rất hữu ích khi có nhiều tùy chọn chọn được đặt.

Trong trường hợp khi bạn tải tất cả <options ....></options>bằng cuộc gọi Ajax
hiện theo các bước sau để làm điều này.

1). Tạo một phương thức riêng cho giá trị thiết lập thả xuống
Đối với Ex:

function set_ip_base_country(countryCode)
    $('#country').val(countryCode)
} 

2). Gọi phương thức này khi ajax gọi thành công tất cả nhiệm vụ nối thêm html

Ví dụ:

success: function (doc) {
  .....
  .....
  $("#country").append('<option style="color:black;" value="' + key + '">'  +   value + '</option>')
  set_ip_base_country(ip_base_country)
}

Đặt drop-down selectedgiá trị và thay đổi cập nhật

$("#PR2DistrictId option[value='@Model.PR2DistrictId']").attr("selected", true).trigger("chosen:updated")

Ở đây chúng tôi lần đầu tiên đặt giá trị từ Modelvà hơn là cập nhật nó vào đã chọn

// Định dạng Html của danh sách thả xuống.

<select id="MyDropDownList">
<option value=test1 selected>test1</option>
<option value=test2>test2</option>
<option value=test3>test3</option>
<option value=test4>test4</option>

// Nếu bạn muốn thay đổi Mục đã chọn thành test2 bằng javascript. Hãy thử cái này // đặt tùy chọn tiếp theo bạn muốn chọn

var NewOprionValue = "Test2"

        var RemoveSelected = $("#MyDropDownList")[0].innerHTML.replace('selected', '');
        var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + 'selected>');
        $('#MyDropDownList').html(ChangeSelected);

Sử dụng câu trả lời được đánh dấu / đánh dấu ở trên có hiệu quả đối với tôi ... đây là một cái nhìn sâu sắc. Tôi đã gian lận một chút khi nhận URL, nhưng về cơ bản tôi đang xác định URL trong Javascript, và sau đó đặt nó thông qua câu trả lời jquery từ phía trên:

<select id="select" onChange="window.location.href=this.value">
    <option value="">Select a task </option>
    <option value="http://127.0.0.1:5000/choose_form/1">Task 1</option>
    <option value="http://127.0.0.1:5000/choose_form/2">Task 2</option>
    <option value="http://127.0.0.1:5000/choose_form/3">Task 3</option>
    <option value="http://127.0.0.1:5000/choose_form/4">Task 4</option>
    <option value="http://127.0.0.1:5000/choose_form/5">Task 5</option>
    <option value="http://127.0.0.1:5000/choose_form/6">Task 6</option>
    <option value="http://127.0.0.1:5000/choose_form/7">Task 7</option>
    <option value="http://127.0.0.1:5000/choose_form/8">Task 8</option>
</select>
<script>
    var pathArray = window.location.pathname.split( '/' );
    var selectedItem = "http://127.0.0.1:5000/" + pathArray[1] + "/" + pathArray[2];
    var trimmedItem = selectedItem.trim();
    $("#select").val(trimmedItem);
</script>

Đối với những người sử dụng Bootstrap, hãy sử dụng $(#elementId').selectpicker('val','elementValue')thay vì $('#elementId').val('elementValue'), vì cái sau không cập nhật giá trị trong UI.

Lưu ý : Ngay cả .change()chức năng cũng hoạt động, như được đề xuất ở trên trong một số câu trả lời, nhưng nó kích hoạt$('#elementId').change(function(){ //do something }) chức năng.

Chỉ cần đăng bài này ra cho mọi người tham khảo chủ đề này trong tương lai.