JQuery utworzyć nową opcję wyboru

Question

Mam poniższe funkcje w zwykłym JavaScript, tworząc opcje zaznaczania. Czy jest sposób, w jaki mogę to zrobić z jQuery bez konieczności używania obiektu formularza? Może przechowywania opcje jako tablicę obiektów JSON i analizowania tego w funkcji wywołującej ...

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"); 
} 

Poniżej jest jak zgłoszę funkcja powyżej:

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

Answer 1

Coś jak:

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

populate('#myform .myselect'); 

Albo nawet:

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

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

Answer 2

Co

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

Answer 3

Jak o

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

Answer 4

To jest mylące. Kiedy mówisz "obiekt formularza", masz na myśli element "<select>"? Jeśli nie, twój kod nie będzie działał, więc zakładam, że twoja zmienna form jest w rzeczywistości odniesieniem do elementu <select>. Dlaczego chcesz przepisać ten kod? To, co posiadasz, działało we wszystkich skryptowalnych przeglądarkach od 1996 roku i nie przestanie działać w najbliższym czasie. Wykonanie tej czynności za pomocą jQuery spowoduje, że twój kod będzie wolniejszy, bardziej podatny na błędy i mniej kompatybilny z różnymi przeglądarkami.

Oto funkcja, która wykorzystuje swój aktualny kod jako punkt wyjścia i zapełnia element <select> z obiektu:

<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

Jeśli trzeba wykonać pojedynczy element można użyć tej budowy:

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

Jeśli jednak chcesz wydrukować wiele elementów, możesz użyć tej konstrukcji:

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