Thêm tùy chọn vào <select> bằng jQuery?

Cách dễ nhất để thêm optionmột danh sách thả xuống bằng jQuery là gì?

Điều này sẽ làm việc?

$("#mySelect").append('<option value=1>My option</option>');

Điều này KHÔNG hoạt động trong IE8 (chưa làm trong FF):

$("#selectList").append(new Option("option text", "value"));

DID này hoạt động:

var o = new Option("option text", "value");
/// jquerify the DOM object 'o' so we can use the html method
$(o).html("option text");
$("#selectList").append(o);

Cá nhân, tôi thích cú pháp này cho các tùy chọn nối thêm:

$('#mySelect').append($('<option>', {
    value: 1,
    text: 'My option'
}));

Nếu bạn đang thêm tùy chọn từ bộ sưu tập các mục, bạn có thể làm như sau:

$.each(items, function (i, item) {
    $('#mySelect').append($('<option>', { 
        value: item.value,
        text : item.text 
    }));
});

Bạn có thể thêm tùy chọn bằng cú pháp sau, Ngoài ra, bạn có thể truy cập để xử lý tùy chọn trong jQuery để biết thêm chi tiết.

1. $('#select').append($('<option>', {value:1, text:'One'}));

2. $('#select').append('<option value="1">One</option>');

3. var option = new Option(text, value); $('#select').append($(option));

Nếu tên hoặc giá trị tùy chọn là động, bạn sẽ không phải lo lắng về việc thoát các ký tự đặc biệt trong đó; trong trường hợp này, bạn có thể thích các phương thức DOM đơn giản:

var s= document.getElementById('mySelect');
s.options[s.options.length]= new Option('My option', '1');

Lựa chọn 1-

Bạn có thể thử điều này-

$('#selectID').append($('<option>',
 {
    value: value_variable,
    text : text_variable
}));

Như thế này-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append($('<option>',
     {
        value: i,
        text : "Option "+i 
    }));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

Lựa chọn 2-

Hoặc thử cái này-

$('#selectID').append( '<option value="'+value_variable+'">'+text_variable+'</option>' );

Như thế này-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

Điều này rất đơn giản:

$('#select_id').append('<option value="five" selected="selected">Five</option>');

hoặc là

$('#select_id').append($('<option>', {
                    value: 1,
                    text: 'One'
                }));

Điều đó làm việc tốt.

Nếu thêm nhiều hơn một yếu tố tùy chọn, tôi khuyên bạn nên thực hiện nối thêm một lần thay vì thực hiện nối thêm trên mỗi thành phần.

vì lý do nào đó $("#myselect").append(new Option("text", "text"));không làm việc cho tôi trong IE7 +

Tôi đã phải sử dụng $("#myselect").html("<option value='text'>text</option>");

Để giúp hiệu suất, bạn nên cố gắng chỉ thay đổi DOM một lần, thậm chí nhiều hơn nếu bạn thêm nhiều tùy chọn.

var html = '';

for (var i = 0, len = data.length; i < len; ++i) {
    html.join('<option value="' + data[i]['value'] + '">' + data[i]['label'] + '</option>');
}           

$('#select').append(html);

$('#mySelect').empty().append('<option value=1>My option</option>').selectmenu('refresh');

Tôi thích sử dụng phương pháp không jquery:

mySelect.add(new Option('My option', 1));

Bạn có thể thêm các tùy chọn động vào danh sách thả xuống như trong ví dụ dưới đây. Ở đây trong ví dụ này tôi đã lấy dữ liệu mảng và liên kết các giá trị mảng đó với danh sách thả xuống như trong ảnh chụp màn hình đầu ra

Đầu ra:

var resultData=["Mumbai","Delhi","Chennai","Goa"]
$(document).ready(function(){
   var myselect = $('<select>');
     $.each(resultData, function(index, key) {
	     myselect.append( $('<option></option>').val(key).html(key) );
       });
      $('#selectCity').append(myselect.html());
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>

<select  id="selectCity">

</select>

Không được đề cập trong bất kỳ câu trả lời nào nhưng hữu ích là trường hợp bạn muốn tùy chọn đó cũng được chọn, bạn có thể thêm:

var o = new Option("option text", "value");
o.selected=true;
$("#mySelect").append(o);

var select = $('#myselect');
var newOptions = {
                'red' : 'Red',
                'blue' : 'Blue',
                'green' : 'Green',
                'yellow' : 'Yellow'
            };
$('option', select).remove();
$.each(newOptions, function(text, key) {
    var option = new Option(key, text);
    select.append($(option));
});

Có hai cách. Bạn có thể sử dụng một trong hai.

Đầu tiên:

$('#waterTransportationFrom').append('<option value="select" selected="selected">Select From Dropdown List</option>');

Thứ hai:

$.each(dataCollecton, function(val, text) {            
    options.append($('<option></option>').val(text.route).html(text.route));
});

Nếu bạn muốn chèn tùy chọn mới vào một chỉ mục cụ thể trong phần chọn:

$("#my_select option").eq(2).before($('<option>', {
    value: 'New Item',
    text: 'New Item'
}));

Điều này sẽ chèn "Mục mới" làm mục thứ 3 trong phần chọn.

Bạn có thể chắp thêm và đặt thuộc tính Giá trị bằng văn bản:

$("#id").append($('<option></option>').attr("value", '').text(''));
$("#id").append($('<option></option>').attr("value", '4').text('Financial Institutions'));

Chúng tôi đã tìm thấy một số vấn đề khi bạn thêm tùy chọn và sử dụng xác thực jquery. Bạn phải bấm vào một mục trong danh sách chọn nhiều. Bạn sẽ thêm mã này để xử lý:

$("#phonelist").append("<option value='"+ 'yournewvalue' +"' >"+ 'yournewvalue' +"</option>");

$("#phonelist option:selected").removeAttr("selected"); // add to remove lase selected

$('#phonelist option[value=' + 'yournewvalue' + ']').attr('selected', true); //add new selected

Còn cái này thì sao

var numbers = [1, 2, 3, 4, 5];
var option = '';

for (var i=0;i<numbers.length;i++){
     option += '<option value="'+ numbers[i] + '">' + numbers[i] + '</option>';
    }

    $('#items').append(option);

Đây chỉ là một điểm nhanh để có hiệu suất tốt nhất

luôn luôn khi bạn đang xử lý nhiều tùy chọn, xây dựng một chuỗi lớn và sau đó thêm nó vào 'select' để có hiệu suất tốt nhất

fg

var $ mySelect = $ ('# mySelect'); var str = '';

$.each(items, function (i, item) {
    // IMPORTANT: no selectors inside the loop (for the best performance)
    str += "<option value='" + item.value + "'> " + item.text + "</option>";
});
// you built a big string

$mySelect.html(str); // <-- here you add the big string with a lot of options into the selector.
$mySelect.multiSelect('refresh');

Thậm chí nhanh hơn

var str = ""; 
for(var i; i = 0; i < arr.length; i++){
    str += "<option value='" + item[i].value + "'> " + item[i].text + "</option>";
}    
$mySelect.html(str);
$mySelect.multiSelect('refresh');

$(function () {
     var option = $("<option></option>");
     option.text("Display text");
     option.val("1");
     $("#Select1").append(option);
});

Nếu bạn nhận được dữ liệu từ một đối tượng nào đó, thì chỉ cần chuyển tiếp đối tượng đó để hoạt động ...

$(function (product) {
     var option = $("<option></option>");
     option.text(product.Name);
     option.val(product.Id);
     $("#Select1").append(option);
});

Tên và Id là tên của các thuộc tính đối tượng ... vì vậy bạn có thể gọi chúng là bất cứ thứ gì bạn thích ... Và dĩ nhiên nếu bạn có Mảng ... bạn muốn xây dựng hàm tùy chỉnh với vòng lặp for ... và sau đó chỉ cần gọi hàm đó trong tài liệu đã sẵn sàng ... Chúc mừng

Dựa trên câu trả lời của bộ đôi để nối thêm bộ sưu tập vật phẩm, một lớp lótfor...in cũng sẽ có tác dụng kỳ diệu:

let cities = {'ny':'New York','ld':'London','db':'Dubai','pk':'Beijing','tk':'Tokyo','nd':'New Delhi'};

for(let c in cities){$('#selectCity').append($('<option>',{value: c,text: cities[c]}))}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<select  id="selectCity"></select>

Cả hai giá trị đối tượng và chỉ mục được gán cho các tùy chọn. Giải pháp này hoạt động ngay cả trong jQuery cũ (v1.4) !

Nếu bạn có optgroup bên trong chọn , bạn có lỗi trong DOM.

Tôi nghĩ một cách tốt nhất:

$("#select option:last").after($('<option value="1">my option</option>'));

Bạn có thể thử mã dưới đây để thêm vào tùy chọn

  <select id="mySelect"></select>

    <script>
          $("#mySelect").append($("<option></option>").val("1").html("My enter code hereoption"));
    </script>

$('#select_id').append($('<option>',{ value: v, text: t }));

Đây là cách tôi đã làm, với một nút để thêm từng thẻ chọn.

$(document).on("click","#button",function() {
   $('#id_table_AddTransactions').append('<option></option>')
}

Bạn có thể làm điều này trong ES6:

$.each(json, (i, val) => {
    $('.js-country-of-birth').append(`<option value="${val.country_code}"> ${val.country} </option>`);
  });

Nếu ai đó đến đây đang tìm cách thêm tùy chọn với thuộc tính dữ liệu

Sử dụng attr

var option = $('<option>', { value: 'the_value', text: 'some text' }).attr('family', model.family);

Sử dụng dữ liệu - phiên bản đã thêm 1.2.3

var option = $('<option>', { value: 'the_value', text: 'some text' }).data('misc', 'misc-value);