JQuery tạo tùy chọn chọn mới

Question

Tôi có các chức năng dưới đây trong JavaScript thông thường tạo các tùy chọn được chọn. Có cách nào tôi có thể làm điều này với jQuery mà không cần phải sử dụng các đối tượng hình thức? Có lẽ lưu trữ các tùy chọn như là một mảng của các đối tượng JSON và phân tích cú pháp này trong hàm gọi ...

function populate(form) 
{ 
form.options.length = 0; 
form.options[0] = new Option("Select a city/town in Sweden",""); 
form.options[1] = new Option("Melbourne","Melbourne"); 
} 

Dưới đây là cách tôi gọi hàm trên:

populate(document.form.county); //county is the id of the dropdownlist to populate.  

Answer 1

Một cái gì đó như:

function populate(selector) { 
    $(selector) 
    .append('<option value="foo">foo</option>') 
    .append('<option value="bar">bar</option>') 
} 

populate('#myform .myselect'); 

Hoặc thậm chí:

$.fn.populate = function() { 
    $(this) 
    .append('<option value="foo">foo</option>') 
    .append('<option value="bar">bar</option>') 
} 

$('#myform .myselect').populate(); 

Answer 2

gì về

var option = $('<option/>'); 
option.attr({ 'value': 'myValue' }).text('myText'); 
$('#county').append(option); 

Answer 3

Làm thế nào về

$('#county').append(
    $('<option />') 
     .text('Select a city/town in Sweden') 
     .val(''), 
    $('<option />') 
     .text('Melbourne') 
     .val('Melbourne') 
); 

Answer 4

Đây là khó hiểu. Khi bạn nói "đối tượng biểu mẫu", bạn có muốn nói "yếu tố <select>" không? Nếu không, mã của bạn sẽ không hoạt động, vì vậy, tôi giả định biến số form của bạn thực tế là tham chiếu đến phần tử <select>. Tại sao bạn muốn viết lại mã này? Những gì bạn đã làm việc trong tất cả các trình duyệt có thể chạy được kể từ khoảng năm 1996 và sẽ không ngừng hoạt động sớm. Làm điều đó với jQuery sẽ ngay lập tức làm cho mã của bạn chậm hơn, dễ bị lỗi hơn và ít tương thích hơn trên các trình duyệt.

Dưới đây là một chức năng có sử dụng mã hiện tại của bạn như là một điểm khởi đầu và populates một yếu tố <select> từ một đối tượng:

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

<script type="text/javascript> 

function populateSelect(select, optionsData) { 
    var options = select.options, o, selected; 
    options.length = 0; 
    for (var i = 0, len = optionsData.length; i < len; ++i) { 
     o = optionsData[i]; 
     selected = !!o.selected; 
     options[i] = new Option(o.text, o.value, selected, selected); 
    } 
} 

var optionsData = [ 
    { 
     text: "Select a city/town in Sweden", 
     value: "" 
    }, 
    { 
     text: "Melbourne", 
     value: "Melbourne", 
     selected: true 
    } 
]; 

populateSelect(document.getElementById("mySelect"), optionsData); 

</script> 

Answer 5

Nếu bạn cần phải thực hiện yếu tố duy nhất bạn có thể sử dụng xây dựng này:

$('<option/>', { 
    'class': this.dataID, 
    'text': this.s_dataValue 
}).appendTo('.subCategory'); 

Nhưng nếu bạn cần in nhiều phần tử, bạn có thể sử dụng công trình này:

function printOptions(arr){ 
    jQuery.each(arr, function(){ 
     $('<option/>', { 
      'value': this.dataID, 
      'text': this.s_dataValue 
     }).appendTo('.subCategory'); 
    }); 
}