Làm cách nào để thêm tùy chọn vào DropDownList bằng jQuery?

Như câu hỏi đã nói, làm cách nào để thêm tùy chọn mới vào DropDownList bằng jQuery?

Cảm ơn

Không sử dụng bất kỳ bổ sung nào,

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
    mySelect.append(
        $('<option></option>').val(val).html(text)
    );
});

Nếu bạn có nhiều tùy chọn hoặc mã này cần được chạy rất thường xuyên, thì bạn nên xem xét việc sử dụng DocumentFragment thay vì sửa đổi DOM nhiều lần một cách không cần thiết. Chỉ với một số ít các lựa chọn, tôi muốn nói rằng nó không xứng đáng.

------------------------------- Thêm ------------------ --------------

DocumentFragmentlà tùy chọn tốt để tăng cường tốc độ, nhưng chúng tôi không thể tạo thành phần tùy chọn bằng document.createElement('option')IE6 và IE7 không hỗ trợ.

Những gì chúng ta có thể làm là, tạo một phần tử chọn mới và sau đó nối thêm tất cả các tùy chọn. Khi vòng lặp kết thúc, nối nó vào đối tượng DOM thực tế.

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var _select = $('<select>');
$.each(myOptions, function(val, text) {
    _select.append(
            $('<option></option>').val(val).html(text)
        );
});
$('#mySelect').append(_select.html());

Bằng cách này, chúng tôi sẽ sửa đổi DOM chỉ một lần!

Không có trình cắm, việc này có thể dễ dàng hơn mà không cần sử dụng nhiều jQuery, thay vào đó là trường học cũ hơn một chút:

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
$.each(myOptions, function(val, text) {
    $('#mySelect').append( new Option(text,val) );
});

Nếu bạn muốn chỉ định liệu tùy chọn a) có phải là giá trị được chọn mặc định hay không và nên chọn b) ngay bây giờ, bạn có thể chuyển vào hai tham số nữa:

    var defaultSelected = false;
    var nowSelected     = true;
    $('#mySelect').append( new Option(text,val,defaultSelected,nowSelected) );

Với plugin: jQuery Selection Box . Bạn có thể làm được việc này:

var myOptions = {
        "Value 1" : "Text 1",
        "Value 2" : "Text 2",
        "Value 3" : "Text 3"
    }
    $("#myselect2").addOption(myOptions, false); 

Bạn có thể muốn xóa DropDown của mình trước $ ('# DropDownQuality'). Blank ();

Tôi đã có bộ điều khiển của mình trong MVC trả về một danh sách chọn chỉ với một mục.

$('#DropDownQuality').append(
        $('<option></option>').val(data[0].Value).html(data[0].Text));    

Thêm mục vào danh sách bắt đầu

$("#ddlList").prepend('<option selected="selected" value="0"> Select </option>');

Thêm mục vào danh sách cuối cùng

$('<option value="6">Java Script</option>').appendTo("#ddlList");

Hoạt động thả xuống phổ biến (Nhận, đặt, thêm, xóa) bằng jQuery

Xin lưu ý rằng giải pháp của @ Phrogz không hoạt động trong IE 8 trong khi @ nickf hoạt động trong tất cả các trình duyệt chính. Một cách tiếp cận khác là:

$.each(myOptions, function(val, text) {
    $("#mySelect").append($("<option/>").attr("value", val).text(text));
});

Bạn có thể sử dụng trực tiếp

$"(.ddlClassName").Html("<option selected=\"selected\" value=\"1\">1</option><option value=\"2\">2</option>")

-> Ở đây bạn có thể sử dụng chuỗi trực tiếp

Đồng thời, sử dụng .prepend () để thêm tùy chọn vào đầu danh sách tùy chọn. http://api.jquery.com/prepend/

sử dụng jquery bạn có thể sử dụng

      this.$('select#myid').append('<option>newvalue</option>');

trong đó " myid " là id của danh sách thả xuống và newvalue là văn bản mà bạn muốn chèn ..

Tôi cần thêm nhiều tùy chọn vào danh sách thả xuống khi có trang thả xuống trên trang của tôi. Vì vậy, tôi đã sử dụng nó theo cách này:

function myAppender(obj, value, text){
    obj.append($('<option></option>').val(value).html(text));
}

$(document).ready(function() {
    var counter = 0;
    var builder = 0;
    // Get the number of dropdowns
    $('[id*="ddlPosition_"]').each(function() {
        counter++;
    });

    // Add the options for each dropdown
    $('[id*="ddlPosition_"]').each(function() {
        var myId = this.id.split('_')[1];

        // Add each option in a loop for the specific dropdown we are on
        for (var i=0; i<counter; i++) {
            myAppender($('[id*="ddlPosition_'+myId+'"]'), i, i+1);
        }
        $('[id*="ddlPosition_'+myId+'"]').val(builder);
        builder++;
    });
});

Điều này tự động thiết lập thả xuống với các giá trị như 1 đến n và tự động chọn giá trị cho thứ tự thả xuống (ví dụ: thả xuống thứ 2 có "2" trong hộp, v.v.).

Thật là nực cười khi tôi không thể sử dụng thishoặc this.Objecthoặc $.objbất cứ thứ gì tương tự như vậy trong lần thứ 2 của mình .each(), mặc dù vậy --- tôi thực sự phải lấy ID cụ thể của đối tượng đó và sau đó lấy và chuyển toàn bộ đối tượng đó cho chức năng của mình trước khi nó xuất hiện. May mắn thay, ID của danh sách thả xuống của tôi được phân tách bằng dấu "_" và tôi có thể lấy nó. Tôi không cảm thấy tôi nên có, nhưng nó vẫn tiếp tục cho tôi các ngoại lệ jQuery. Một cái gì đó mà người khác đang vật lộn với những gì tôi có thể thích thú khi biết.

Hãy nghĩ rằng phản hồi của bạn là "thành công". Điều này chứa một danh sách mà bạn cần thêm dưới dạng tùy chọn trong menu thả xuống.

success: function (successData) {
var sizeOfData = successData.length;
if (sizeOfData == 0) {
    //    NO DATA, throw an alert ...
    alert ("No Data Found");
} else {
    $.each(successData, function(val, text) {
        mySelect.append(
            $('<option></option>').val(val).html(text)
        );
    });
} }

Điều này sẽ làm việc cho bạn ....

Hãy thử chức năng này:

function addtoselect(param,value){
    $('#mySelectBox').append('<option value='+value+'>'+param+'</option>');
}