JQuery neue Auswahloption erstellen

Ich habe die folgenden Funktionen in regulärem JavaScript, um ausgewählte Optionen zu erstellen. Gibt es eine Möglichkeit, dies mit jQuery zu tun, ohne das Formularobjekt verwenden zu müssen? Vielleicht speichern Sie die Optionen als Array von JSON-Objekten und analysieren dies in der aufrufenden Funktion …

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 obige Funktion aufrufe:

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

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();

Wie wäre es mit

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

Wie wäre es mit

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

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

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

Aber wenn Sie 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');
    });
}

Eine wirklich einfache Möglichkeit, dies zu tun …

// create the option
var opt = $("<option>").val("myvalue").text("my text");

//append option to the select element
$(#my-select).append(opt);

Dies kann auf viele Arten erfolgen, sogar in einer einzigen Zeile, wenn Sie es wirklich wollen.

Das ist verwirrend. Wenn Sie “Formularobjekt” sagen, meinen Sie “<select> element”? Wenn nicht, wird Ihr Code nicht funktionieren, also nehme ich Ihren an form Variable ist tatsächlich ein Verweis auf a <select> Element. Warum willst du diesen Code umschreiben? Was Sie haben, funktioniert seit ungefähr 1996 in allen skriptfähigen Browsern und wird in absehbarer Zeit nicht aufhören zu funktionieren. Wenn Sie dies mit jQuery tun, wird Ihr Code sofort langsamer, fehleranfälliger und weniger browserübergreifend kompatibel.

Hier ist eine Funktion, die Ihren aktuellen Code als Ausgangspunkt verwendet und eine <select> Element aus 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>