web-dev-qa-db-ja.com

JQueryは新しい選択オプションを作成します

選択オプションを作成する通常の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.
javascriptjqueryhtmljquery-selectors
32
van

何かのようなもの：

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

どう？

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

どう？

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

単一の要素を作成する必要がある場合は、次の構成を使用できます。

$('<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');
    });
}
10
mdBender

これは紛らわしいです。 「フォームオブジェクト」と言うとき、「<select>要素」という意味ですか？そうでない場合、コードは機能しないため、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>
5
Tim Down

これを行うための本当に簡単な方法...

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

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

これは、本当に必要な場合は1行でも、さまざまな方法で実行できます。

3
Tony Norcross