Câu hỏi Cách tốt nhất để thêm các tùy chọn cho một lựa chọn từ một đối tượng JS với jQuery là gì?


Phương pháp tốt nhất để thêm tùy chọn cho <select> từ một đối tượng JavaScript bằng jQuery?

Tôi đang tìm một cái gì đó mà tôi không cần một plugin để làm, nhưng tôi cũng sẽ quan tâm đến các plugin được ra khỏi đó.

Đây là những gì tôi đã làm:

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

Một giải pháp sạch / đơn giản:

Đây là một làm sạch và đơn giản hóa phiên bản của matdumsa's:

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

Thay đổi từ matdumsa's: (1) đã xóa thẻ đóng cho tùy chọn bên trong chắp thêm () và (2) di chuyển thuộc tính / thuộc tính vào bản đồ dưới dạng tham số thứ hai của append ().


1205
2017-10-04 20:58


gốc


có thể giúp đỡ: texotela.co.uk/code/jquery/select (đó là một sự giúp đỡ cho tôi sau khi tôi vấp phải câu hỏi này) - ManBugra
Phiên bản được dọn dẹp được liệt kê ở trên chỉ hoạt động trong Jquery 1.4+. Đối với các phiên bản cũ, hãy sử dụng câu trả lời trong câu trả lời của matdumsa - Thedric Walker
{value: key} phải là {"value": key} như được thấy trong câu trả lời của matdumsa. - Nick P
Tôi không tin như vậy kể từ value là một chuỗi (và mã hoá cứng) nó không cần phải được trích dẫn. - Darryl Hein
có thể điều này sẽ giúp bạn - kvcodes.com/2016/10/… - Kvvaradha


Các câu trả lời:


Giống như các câu trả lời khác, trong thời trang jQuery:

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

1223
2017-10-04 21:12



Trước tiên tôi sẽ chỉ định $("#mySelect") đến một var, nếu không gọi $("#mySelect") mỗi lần bên trong vòng lặp là rất lãng phí, như đang cập nhật DOM. Xem các điểm # 3 và # 6 tại artzstudio.com/2009/04/jquery-performance-rules/… - Patrick
bạn có thể làm tốt var mySelect = $("#mySelect") outside of the mỗi vòng lặp. Điều đó sẽ hiệu quả hơn nhiều. Xem câu trả lời của Carl bên dưới - Patrick
Đề nghị của tôi cho một phong cách jQuery tốt hơn: $ ('# mySelect') .append ($ ("<option />") .val (key) .text (value)); - FAjir
Với sự phổ biến của câu trả lời này, điều đáng nói đến là bạn nên tránh cập nhật DOM trong các vòng lặp. jsperf.com/jquery-append-array-vs-string - jthomas
câu trả lời này quá nhiều gây hiểu lầm vì sai ý định ... attr và text thực sự là phương pháp của $('<option/>')-vật - Blauhirn


var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

Bằng cách này, bạn "chạm vào DOM" chỉ một lần.

Tôi không chắc chắn nếu dòng mới nhất có thể được chuyển đổi thành $ ('# mySelect') html (output.join ('')) bởi vì tôi không biết jQuery internals (có thể nó không một số phân tích trong html () phương pháp)


238
2017-11-05 19:42



Phương pháp của bạn rõ ràng là nhanh hơn so với câu trả lời 'đúng' ở trên vì nó cũng sử dụng jQuery ít hơn. - Thorpe Obazee
dòng "$ ('# mySelect'). get (0) .innerHTML = output.join ('');" hoạt động trong Chrome và FF3.x nhưng không có trong IE7 như tôi có thể nói - blu
Điều này vi phạm nếu key có một số trích dẫn hoặc >, < trong đó. - nickf
Và, nếu tôi có hai lựa chọn mà tôi không muốn mất. Làm cách nào để tôi có thể thêm các giá trị tùy chọn mới này vào các giá trị hiện tại? - VansFannel
Một cải tiến nhỏ là ghép nối bằng cách sử dụng tham gia chứ không phải dấu cộng, như vậy: output.push ('<option value = "', key, '">', value, '</ option>'); - MM.


Điều này là hơi nhanh hơn và sạch hơn.

$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key,
        text: value
    }));
});

181
2017-07-01 07:00



Hoàn hảo. Để thêm vào nó, các thuộc tính bổ sung cho lựa chọn có thể được thêm vào. $ .each (selectValues, function (id, value, text) {$ ('# mySelect'). chắp thêm ($ ("<option />", {id: id value: value, text: text}));} ); - idok
Nó nghĩ rằng nó sẽ là một ý tưởng tốt hơn để cache `$ ('# mySelect')`, để bạn tra cứu chỉ một lần trước vòng lặp. Hiện tại, nó đang tìm kiếm DOM cho phần tử cho mọi tùy chọn. - Sushanth --
@ Sushanth-- lớn như thế nào một hit hiệu suất là điều này nếu thiết lập là nhỏ? - ckarbass
@ckarbass - phụ thuộc vào DOM của bạn lớn đến mức nào. Tiềm năng lớn và rất ít nỗ lực để gán nó cho một biến, đáng kể ít hơn viết một bình luận trong SO! - Nick H247


jQuery

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

Vanilla JavaScript

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

78
2018-05-31 22:52



Chưa bao giờ nghe nói về Option đối tượng trước. Điều đó có được tích hợp vào tất cả các trình duyệt không? - Darryl Hein
vâng, đó là: devguru.com/technologies/ecmascript/quickref/option.html - Carl Hörberg
Tôi đã thử sử dụng new Option, nhưng thấy rằng nó không hoạt động trong IE6 và 7. Tôi không có lý do tại sao, nhưng nhiều tùy chọn jQuery đầy đủ hoạt động. - Darryl Hein
Cách hay để thêm lựa chọn. new Option('display', value, true) - boatcoder
Phương pháp đầu tiên không hoạt động trong IE8. - simon


Sử dụng Trình tạo DOM Elements Creator (yêu thích của tôi):

$.create('option', {'value': 'val'}, 'myText').appendTo('#mySelect');

Sử dụng Option constructor (không chắc chắn về hỗ trợ trình duyệt):

$(new Option('myText', 'val')).appendTo('#mySelect');

Sử dụng document.createElement (tránh làm việc thêm phân tích cú pháp HTML với $("<option></option>")):

$('#mySelect').append($(document.createElement("option")).
                        attr("value","val").text("myText"));

30
2017-10-05 15:49





Điều này trông đẹp hơn, cung cấp khả năng đọc, nhưng chậm hơn so với các phương pháp khác.

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

Nếu bạn muốn tốc độ, cách nhanh nhất (thử nghiệm!) Là này, sử dụng mảng, không nối chuỗi, và chỉ sử dụng một cuộc gọi nối thêm.

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

25
2017-12-21 15:50





Tất cả những câu trả lời này có vẻ phức tạp không cần thiết. Tất cả bạn cần là:

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

Đó là hoàn toàn tương thích với trình duyệt.


17
2017-10-11 17:20



Nó phải được new Option(value, key); ? Các thứ tự tham số là Tùy chọn (text_visible_part, value_behind_the_scenes). - Bob Stein


@joshperry

Có vẻ như đồng bằng .append cũng hoạt động như mong đợi,

$("mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);

16
2018-04-17 11:29



bạn có thể sử dụng cách khác $.weakmap để cho phép GC - Chef_Code
Điểm thưởng cho sự thanh lịch: sử dụng thích hợp map() xây dựng, kết hợp với tài sản của append() để thêm một mảng các đối tượng một cách chính xác! - Jochem Schulenklopper


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

 $('#choose_schedule').get(0).innerHTML = output.join('');

Tôi đã thực hiện một vài bài kiểm tra và điều này, tôi tin rằng, công việc nhanh nhất. : P


14
2017-11-09 06:29



.each nổi tiếng chậm so với các cách khác để đạt được kết quả tương tự. Đây là những gì tôi đã suy nghĩ và sẽ giới thiệu phương pháp này. - Allen Tellez
Thật không may là 90% các biến thể ở đây sử dụng $ .each (). Vòng lặp for () có thể cung cấp cho bạn nhiều lợi ích kiểm soát và hiệu suất hơn, ngay cả khi nó nhỏ gọn hơn. - HoldOffHunger


Được forwarned ... Tôi đang sử dụng jQuery Mobile 1.0b2 với PhoneGap 1.0.0 trên điện thoại Android 2.2 (Cyanogen 7.0.1) (T-Mobile G2) và không thể sử dụng phương thức .append () để làm việc. Tôi đã phải sử dụng .html () như sau:

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);

12
2017-09-16 13:22