jQueryを使ってJavaScriptオブジェクトから<select>
にオプションを追加する場合、どのような方法が最適でしょうか?
私はプラグインを必要としないものを探していますが、世の中に出回っているプラグインにも興味があります。
これは私がやったことです。
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's]1をクリーンアップして簡略化したものです。
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($('<option>', { value : key })
.text(value));
});
matdumsa'sからの変更点。(1)append()内のオプションのcloseタグを削除、(2)プロパティ/アトリビュートをappend()の2番目のパラメータとしてマップに移動しました。
古いIEバージョンをサポートする必要がないのであれば、Option
コンストラクタを使用するのが明らかに良い方法であり、読みやすく効率的なソリューションです。
$(new Option('myText', 'val')).appendTo('#mySelect');
機能的には同等ですが、よりすっきりしています。
$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');
私はこのようなものを作りました。load a dropdown item via Ajax。上記のような対応でも問題ありませんが、パフォーマンス向上のためにはDOMの修正をできるだけ少なくすることが望ましいと思います。
そのため、ループ内で各項目を追加するのではなく、ループ内で項目を収集し、完了したら追加するのが良いでしょう。
$(data).each(function(){
... Collect items
})
追加します。
$('#select_id').append(items);
または、もっと良い
$('#select_id').html(items);