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

Phương pháp tốt nhất để thêm các tùy chọn vào một <select>đối tượng JavaScript bằng jQuery là gì?

Tôi đang tìm kiếm thứ 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 ngoà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 đơn giản / sạch sẽ:

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

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

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

Giống như các câu trả lời khác, theo kiểu jQuery:

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

var output = [];

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

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

Theo 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 nội bộ jQuery (có thể nó phân tích cú pháp trong html () phương pháp)

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>

jQuery

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

Vani JavaScript

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

Nếu bạn không phải hỗ trợ các phiên bản IE cũ, sử dụng hàm Optiontạo rõ ràng là cách tốt nhất, một giải pháp hiệu quả và dễ đọc :

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

Nó tương đương về chức năng, nhưng sạch hơn:

$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');

Điều này trông đẹp hơn, cung cấp khả năng đọc, nhưng chậm hơn 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à cách 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(''));

Một sàng lọc của câu trả lời cũ hơn của joshperry :

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

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

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

hoặc ngắn hơn,

$("#mySelect").append(
  $.map(selectValues, (v,k) => $("<option>").val(k).text(v))
  // $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
);

Tất cả những câu trả lời 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 trình duyệt.

Được báo trước ... 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à hoàn toàn không thể sử dụng phương thức .append (). 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);

 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 thử nghiệm và điều này, tôi tin rằng, thực hiện công việc nhanh nhất. : P

Có một cách tiếp cận bằng cách sử dụng phương pháp Microsoft Templating hiện đang được đề xuất để đưa vào lõi jQuery. Có nhiều sức mạnh hơn trong việc sử dụng templating để cho kịch bản đơn giản nhất, nó có thể không phải là lựa chọn tốt nhất. Để biết thêm chi tiết, xem bài đăng của Scott Gu phác thảo các tính năng.

Đầu tiên bao gồm tệp js templating, có sẵn từ github .

<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

Tiếp theo thiết lập một mẫu

<script id="templateOptionItem" type="text/html">
    <option value=\'{{= Value}}\'>{{= Text}}</option>
</script>

Sau đó, với dữ liệu của bạn, hãy gọi phương thức .render ()

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

Tôi đã viết phương pháp này chi tiết hơn.

Tôi đã làm một cái gì đó như thế này, tải một mục thả xuống thông qua Ajax . Phản hồi ở trên cũng có thể chấp nhận được, nhưng điều tốt là luôn có ít sửa đổi DOM càng tốt để có hiệu suất tốt hơn.

Vì vậy, thay vì thêm từng mục bên trong một vòng lặp, tốt hơn là thu thập các mục trong một vòng lặp và nối thêm nó sau khi hoàn thành.

$(data).each(function(){
    ... Collect items
})

Nối nó

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

hoặc thậm chí tốt hơn

$('#select_id').html(items);

Cách đơn giản là:

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");

Hầu hết các câu trả lời khác sử dụng eachhàm để lặp lại qua selectValues. Điều này đòi hỏi phải nối thêm vào cho từng phần tử và một dòng lại được kích hoạt khi mỗi phần tử được thêm vào riêng lẻ.

Cập nhật câu trả lời này thành một phương thức chức năng thành ngữ hơn (sử dụng JS hiện đại) có thể được hình thành để appendchỉ gọi một lần, với một mảng các optionphần tử được tạo bằng ánh xạ và hàm tạo Optionphần tử.

Việc sử dụng một Optionphần tử DOM sẽ làm giảm chi phí gọi hàm vì optionphần tử không cần phải cập nhật sau khi tạo và logic phân tích cú pháp của jQuery không cần chạy.

$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))

Điều này có thể được đơn giản hóa hơn nữa nếu bạn tạo một hàm tiện ích xuất xưởng sẽ tạo ra một đối tượng tùy chọn:

const newoption = (...args) => new Option(...args)

Sau đó, điều này có thể được cung cấp trực tiếp đến map:

$('mySelect').append($.map(selectValues, newoption))

Công thức trước

Vì appendcũng cho phép truyền các giá trị dưới dạng số lượng đối số thay đổi, chúng tôi có thể tạo trước danh sách các optionphần tử ánh xạ và nối chúng thành đối số trong một cuộc gọi bằng cách sử dụngapply .

$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));

Có vẻ như trong các phiên bản sau của jQuery, appendcũng chấp nhận một đối số mảng và điều này có thể được đơn giản hóa phần nào:

$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))

function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}   

Nó hoạt động tốt với jQuery 1.4.1.

Để xem bài viết đầy đủ để sử dụng danh sách động với ASP.NET MVC & jQuery, hãy truy cập:

Danh sách chọn động với MVC và jQuery

Có một vấn đề sắp xếp với giải pháp này trong Chrome (jQuery 1.7.1) (Chrome sắp xếp các thuộc tính đối tượng theo tên / số?) Vì vậy, để giữ trật tự (vâng, đó là đối tượng lạm dụng), tôi đã thay đổi điều này:

optionValues0 = {"4321": "option 1", "1234": "option 2"};

đến đây

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

và sau đó $ .each sẽ giống như:

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
}); 

Thay vì lặp lại cùng một mã ở mọi nơi, tôi khuyên bạn nên viết hàm jQuery của riêng mình như sau:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

Sau đó, để thêm một tùy chọn chỉ cần làm như sau:

$('select').addOption('0', 'None');

Bạn chỉ có thể lặp qua mảng json của mình với đoạn mã sau

$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");

Mặc dù các câu trả lời trước đây đều là câu trả lời hợp lệ - có thể nên nối tất cả những câu trả lời này vào tài liệuF thực hành trước, sau đó nối đoạn tài liệu đó thành một phần tử sau ...

Xem suy nghĩ của John Resig về vấn đề này ...

Một cái gì đó dọc theo dòng:

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);

1. $.each chậm hơn một for vòng lặp
2. Mỗi lần, một lựa chọn DOM không phải là cách thực hành tốt nhất trong vòng lặp $("#mySelect").append();

Vì vậy, giải pháp tốt nhất là sau đây

Nếu dữ liệu JSON resplà

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

sử dụng nó như

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

Một cách khác để làm điều đó:

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

if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

    $("#myselect").empty().append(opts);
}

Điều này thao túng DOM chỉ một lần sau lần đầu tiên xây dựng một chuỗi khổng lồ.

Đó là những gì tôi đã làm với mảng hai chiều: Cột đầu tiên là mục i, thêm vào innerHTMLcủa <option>. Cột thứ hai là RECORD_ID i, thêm vào valuecủa <option>:

1. PHP

   $items = $dal->get_new_items(); // Gets data from the database
   $items_arr = array();
   $i = 0;
   foreach ($items as $item)
   {
       $first_name = $item->first_name;
       $last_name = $item->last_name;
       $date = $item->date;
       $show = $first_name . " " . $last_name . ", " . $date;
       $request_id = $request->request_id;
       $items_arr[0][$i] = $show;
       $items_arr[1][$i] = $request_id;
       $i++;
   }
   
   echo json_encode($items_arr);

2. JavaScript / Ajax

           function ddl_items() {
               if (window.XMLHttpRequest) {
                   // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                   xmlhttp=new XMLHttpRequest();
               }
               else{
                   // Code for Internet Explorer 6 and Internet Explorer 5
                   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
               }
   
               xmlhttp.onreadystatechange=function() {
               if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                   var arr = JSON.parse(xmlhttp.responseText);
                   var lstbx = document.getElementById('my_listbox');
   
                   for (var i=0; i<arr.length; i++) {
                       var option = new Option(arr[0][i], arr[1][i]);
                       lstbx.options.add(option);
                   }
               }
           };
   
           xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
           xmlhttp.send();
       }
   }

Một plugin jQuery có thể được tìm thấy ở đây: Tự động điền vào các hộp bằng cách sử dụng jQuery & AJAX .

Tôi thấy rằng điều này là đơn giản và làm việc tuyệt vời.

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};

Định dạng JSON:

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

Và mã jQuery để đưa các giá trị vào Dropdown trên Ajax thành công:

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

Sử dụng hàm $ .map (), bạn có thể thực hiện việc này theo cách thanh lịch hơn:

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

<!DOCTYPE html>
<html lang="en">
<head>
  <title>append selectbox using jquery</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript">
    function setprice(){
        var selectValues = { "1": "test 1", "2": "test 2" };
        $.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

    }
  </script>
</head>
<body onload="setprice();">


      <select class="form-control" id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>


</body>
</html>

Đặt id chọn HTML của bạn vào dòng dưới đây. Ở đây mySelectđược sử dụng làm id của phần tử chọn.

   var options = $("#mySelect");

sau đó lấy đối tượng là selectValues ​​trong kịch bản này và đặt nó vào jquery cho mỗi vòng lặp. Nó sẽ sử dụng giá trị và văn bản của các đối tượng tương ứng và nối nó vào các lựa chọn tùy chọn như sau.

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

Điều này sẽ hiển thị văn bản dưới dạng danh sách tùy chọn khi danh sách thả xuống được chọn và một khi văn bản được chọn, giá trị của văn bản được chọn sẽ được sử dụng.

Ví dụ.

"1": "kiểm tra 1", "2": "kiểm tra 2",

Thả xuống

tên hiển thị: test 1 -> value là 1 tên hiển thị: test 2 -> value là 2

Trên thực tế, để có được hiệu suất được cải thiện, tốt hơn là tạo danh sách tùy chọn riêng biệt và nối thêm vào chọn id.

var options = [];
$.each(selectValues, function(key, value) {
    options.push ($('<option>', { value : key })
          .text(value));
});
 $('#mySelect').append(options);

http://learn.jquery.com/performance/append-outside-loop/