javascript - jQueryを使用してJavaScriptオブジェクトから選択するオプションを追加する最良の方法は何ですか?

Question

<select>jQueryを使用してJavaScriptオブジェクトからオプションを追加するための最良の方法は何ですか?

プラグインを必要としないものを探していますが、そこにあるプラグインにも興味があります。

これは私がしたことです：

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

クリーン/シンプルなソリューション:

これは、 matdumsa ののクリーンアップおよび簡略化されたバージョンです。

$.each(selectValues, function(key, value) {
     $('#mySelect')
          .append($('<option>', { value : key })
          .text(value));
});

matdumsa からの変更点: (1) append() 内のオプションの終了タグを削除し、(2) プロパティ/属性を append() の 2 番目のパラメーターとしてマップに移動しました。

score 1448 · Accepted Answer

jQueryの方法で、他の回答と同じ：

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value", key)
                    .text(value)); 
});

score 285 · Accepted Answer

var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

このようにして、「DOM に触れる」のは 1 回だけです。

jQueryの内部構造がわからないため、最新の行を $('#mySelect').html(output.join('')) に変換できるかどうかはわかりません(html()で解析を行う可能性があります)方法）

score 210 · Accepted Answer

これはわずかに高速でクリーンです。

var selectValues = {
  "1": "test 1",
  "2": "test 2"
};
var $mySelect = $('#mySelect');
//
$.each(selectValues, function(key, value) {
  var $option = $("<option/>", {
    value: key,
    text: value
  });
  $mySelect.append($option);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>

score 106 · Accepted Answer

jQuery

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

バニラ JavaScript

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

score 40 · Accepted Answer

古い IE バージョンをサポートする必要がない場合は、Optionコンストラクターを使用するのが明らかに適切な方法であり、読みやすく効率的なソリューションです。

$(new Option('myText', 'val')).appendTo('#mySelect');

機能的には同等ですが、以下よりもクリーンです。

$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');

score 32 · Accepted Answer

これは見栄えが良く、読みやすさを提供しますが、他の方法よりも遅くなります。

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

速度が必要な場合、最速の（テスト済み！）方法は、文字列の連結ではなく配列を使用し、1回の追加呼び出しのみを使用する方法です。

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

score 24 · Accepted Answer

古い@joshperryの回答の改良：

プレーンな.appendも期待どおりに動作するようですが、

$("#mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);

またはそれより短い、

$("#mySelect").append(
  $.map(selectValues, (v,k) => $("<option>").val(k).text(v))
  // $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
);

score 21 · Accepted Answer

これらの答えはすべて不必要に複雑に思えます。あなたに必要なのは：

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

これは完全にクロスブラウザ互換です。

score 19 · Accepted Answer

注意してください...Android2.2（Cyanogen 7.0.1）電話（T-Mobile G2）でPhoneGap1.0.0とともにjQueryMobile 1.0b2を使用していますが、.append（）メソッドをまったく機能させることができませんでした。次のように.html（）を使用する必要がありました。

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);

score 19 · Accepted Answer

 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
 }

 $('#choose_schedule').get(0).innerHTML = output.join('');

私はいくつかのテストを行いましたが、これが最も速く機能すると思います。：P

score 16 · Accepted Answer

現在jQueryコアに含めることが提案されているMicrosoftテンプレートアプローチを使用したアプローチがあります。テンプレートを使用する方が強力なので、最も単純なシナリオでは、最適なオプションではない可能性があります。詳細については、機能の概要を説明したScottGuの投稿を参照してください。

まず、 githubから入手できるテンプレートjsファイルを含めます。

<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

次にテンプレートを設定します

<script id="templateOptionItem" type="text/html">
    <option value=\'{{= Value}}\'>{{= Text}}</option>
</script>

次に、データを使用して.render（）メソッドを呼び出します

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

私はこのアプローチをより詳細にブログに書きました。

score 14 · Accepted Answer

Ajax 経由でドロップダウン項目をロードして、このようなものを作成しました。上記の応答も受け入れられますが、パフォーマンスを向上させるために、DOM の変更をできるだけ少なくすることは常に良いことです。

したがって、ループ内に各アイテムを追加するよりも、ループ内にアイテムを集めて、ループが完了したら追加する方がよいでしょう。

$(data).each(function(){
    ... Collect items
})

それを追加し、

$('#select_id').append(items);

またはさらに良い

$('#select_id').html(items);

score 11 · Accepted Answer

他のほとんどの回答は、each関数を使用してを繰り返し処理しますselectValues。これには、要素ごとにappendが呼び出され、それぞれが個別に追加されたときにリフローがトリガーされる必要があります。

この回答をより慣用的な関数メソッド（最新のJSを使用）に更新すると、マップと要素コンストラクターを使用して作成された要素appendの配列を使用して、1回だけ呼び出すように形成できます。optionOption

DOM要素を使用すると、作成後に要素を更新する必要がなく、jQueryの解析ロジックを実行する必要がないOptionため、関数呼び出しのオーバーヘッドが削減されます。option

$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))

オプションオブジェクトを新しくするファクトリユーティリティ関数を作成すると、これをさらに簡略化できます。

const newoption = (...args) => new Option(...args)

次に、これを直接提供できますmap：

$('mySelect').append($.map(selectValues, newoption))

以前の処方

append可変数の引数として値を渡すこともできるため、option要素マップのリストを事前に作成し、を使用して1回の呼び出しでそれらを引数として追加できますapply。

$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));

jQueryの新しいバージョンでappendは、配列引数も受け入れるように見えます。これは多少簡略化できます。

$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))

score 11 · Accepted Answer

function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}

jQuery1.4.1でうまく機能します。

ASP.NET MVCおよびjQueryで動的リストを使用するための完全な記事については、次を参照してください。

MVCとjQueryを使用した動的選択リスト

score 11 · Accepted Answer

簡単な方法は次のとおりです。

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");

score 9 · Accepted Answer

Chrome（jQuery 1.7.1）のこのソリューションにはソートの問題があります（Chromeはオブジェクトプロパティを名前/番号でソートしますか？）順序を維持するために（はい、オブジェクトの悪用です）、これを変更しました：

optionValues0 = {"4321": "option 1", "1234": "option 2"};

これに

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

$.each は次のようになります。

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
});

score 9 · Accepted Answer

どこでも同じコードを繰り返すよりも、次のような独自の jQuery 関数を作成する方が望ましいと思います。

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

次に、オプションを追加するには、次のようにします。

$('select').addOption('0', 'None');

score 8 · Accepted Answer

次のコードを使用して、json 配列を反復処理できます。

$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");

score 7 · Accepted Answer

jQueryプラグインはここにあります：jQueryとAJAXを使用した選択ボックスの自動入力。

score 7 · Accepted Answer

前の回答はすべて有効な回答ですが、最初にこれらすべてを documentFragmnet に追加し、その後にそのドキュメントフラグメントを要素として追加することをお勧めします...

この問題に関するジョン・レジグの考えを参照してください...

次のようなもの：

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);

score 7 · Accepted Answer

それが私が 2 次元配列で行ったことです。最初の列はアイテム i で、innerHTMLのに追加され<option>ます。2 番目の列は record_id i で、のに追加しvalueます<option>:

PHP

$items = $dal->get_new_items(); // Gets data from the database
$items_arr = array();
$i = 0;
foreach ($items as $item)
{
    $first_name = $item->first_name;
    $last_name = $item->last_name;
    $date = $item->date;
    $show = $first_name . " " . $last_name . ", " . $date;
    $request_id = $request->request_id;
    $items_arr[0][$i] = $show;
    $items_arr[1][$i] = $request_id;
    $i++;
}

echo json_encode($items_arr);

JavaScript/Ajax

        function ddl_items() {
            if (window.XMLHttpRequest) {
                // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                xmlhttp=new XMLHttpRequest();
            }
            else{
                // Code for Internet Explorer 6 and Internet Explorer 5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                var arr = JSON.parse(xmlhttp.responseText);
                var lstbx = document.getElementById('my_listbox');

                for (var i=0; i<arr.length; i++) {
                    var option = new Option(arr[0][i], arr[1][i]);
                    lstbx.options.add(option);
                }
            }
        };

        xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
        xmlhttp.send();
    }
}

score 6 · Accepted Answer

これはシンプルでうまく機能することがわかりました。

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};

score 5 · Accepted Answer

JSON 形式:

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

そして、Ajax の成功時にドロップダウンに値を設定するための jQuery コード:

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

score 2 · Accepted Answer

2 つの最良の回答を組み合わせて、優れた回答を作成します。

var outputConcatenation = [];

$.each(selectValues, function(i, item) {   
     outputConcatenation.push($("<option></option>").attr("value", item.key).attr("data-customdata", item.customdata).text(item.text).prop("outerHTML"));
});

$("#myselect").html(outputConcatenation.join(''));

javascript - jQueryを使用してJavaScriptオブジェクトから選択するオプションを追加する最良の方法は何ですか?

37 に答える 37

jQuery

バニラ JavaScript

Related

Reference