JQuery neue Auswahloption erstellen

Question

Ich habe die folgenden Funktionen in regulären JavaScript erstellen Optionen. Gibt es eine Möglichkeit, dies mit jQuery zu tun, ohne das Formularobjekt zu verwenden? Vielleicht Speichern der Optionen als ein Array von JSON-Objekte und diese in der anrufenden Funktion Parsen ...

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

Unten ist, wie ich die Funktion oben rufen:

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

Answer 1

Etwas wie:

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

populate('#myform .myselect'); 

Oder auch:

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

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

Answer 2

Was

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

Answer 3

Wie wäre es

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

Answer 4

Dies ist verwirrend. Wenn Sie "Formularobjekt" sagen, meinen Sie "<select> Element"? Wenn nicht, wird Ihr Code nicht funktionieren, also nehme ich an, dass Ihre form Variable tatsächlich eine Referenz auf ein <select> Element ist. Warum willst du diesen Code umschreiben? Was Sie haben, hat seit etwa 1996 in allen skriptfähigen Browsern funktioniert und wird nicht bald aufhören zu arbeiten. Wenn Sie jQuery verwenden, wird Ihr Code sofort langsamer, fehleranfälliger und weniger kompatibel in den Browsern.

Hier ist eine Funktion, die Ihren aktuellen Code als Ausgangspunkt verwendet und füllt ein <select> Element von einem Objekt:

<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

Wenn Sie ein einzelnes Element machen müssen, können Sie diese Konstruktion verwenden:

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

Wenn Sie jedoch viele Elemente drucken müssen, können Sie diese Konstruktion verwenden:

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