JQuery創建新的選擇選項

Question

我在常規JavaScript中創建選擇選項具有以下功能。 有沒有辦法用jQuery做到這一點而不必使用表單對象？ 也許將選項存儲為JSON對象數組並在調用函數中解析它...

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

以下是我如何調用上面的函數：

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

Answer 1

就像是：

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

populate('#myform .myselect');

甚至：

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

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

Answer 2

關於什么

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

Answer 3

怎么樣

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

Answer 4

如果你需要制作單個元素，你可以使用這個結構：

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

但是如果你需要打印許多元素，你可以使用這種結構：

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

Answer 5

這令人困惑。 當你說“表單對象”時，你的意思是“ <select> element”嗎？ 如果沒有，你的代碼將無法工作，所以我假設你的form變量實際上是對<select>元素的引用。 為什么要重寫此代碼？ 自1996年左右以來，您所擁有的所有可編寫腳本的瀏覽器都能使用，並且不會很快停止工作。 使用jQuery會立即使您的代碼變得更慢，更容易出錯並且不會在瀏覽器中兼容。

這是一個使用當前代碼作為起點並從對象填充<select>元素的函數：

<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 6

一個非常簡單的方法來做到這一點......

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

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

這可以通過多種方式完成，即使是在一條線上，如果你真的想要。