にオプションを追加するための最良の方法は何ですか<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番目のパラメータとしてプロパティ/属性をマップに移動しました。
jQueryの方法で、他の答えと同じ：
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
$("#mySelect")そうでなければ呼び出す$("#mySelect")DOMを更新するのと同様に、ループ内で毎回実行するのは非常に無駄です。ポイント3と6を参照してください。artzstudio.com/2009/04/jquery-performance-rules/… - Patrickvar mySelect = $("#mySelect") outside of the それぞれのループそれははるかに効率的です。下記のCarlの回答を参照してください。 - Patrickattrそしてtext実際のメソッドです$('<option/>') - 対象 - Blauhirn
var output = [];
$.each(selectValues, function(key, value)
{
output.push('<option value="'+ key +'">'+ value +'</option>');
});
$('#mySelect').html(output.join(''));
このように、あなたは一度だけ「DOMに触れる」。
最新の行が$（ '#mySelect'）。html（output.join（ ''））に変換できるかどうかわかりませんが、jQueryの内部構造がわからないため（html（）の構文解析が行われる可能性があります）。方法）
keyいくつかの引用符があります>, <その中に。 - nickf
これは少し速くてきれいです。
$.each(selectValues, function(key, value) {
$('#mySelect').append($("<option/>", {
value: key,
text: value
}));
});
var list = $("#selectList");
$.each(items, function(index, item) {
list.append(new Option(item.text, item.value));
});
var list = document.getElementById("selectList");
for(var i in items) {
list.add(new Option(items[i].text, items[i].value));
}
Option前のオブジェクトそれはすべてのブラウザに組み込まれていますか？ - Darryl Heinnew Optionしかし、IE6では動作しないことがわかりました。 7.理由はありませんが、jQueryの完全なオプションの多くが機能しました。 - Darryl Heinnew Option('display', value, true) - boatcoder
を使うDOM Elements Creatorプラグイン（お気に入り）：
$.create('option', {'value': 'val'}, 'myText').appendTo('#mySelect');
を使うOptionコンストラクタ（ブラウザのサポートについてはよくわからない）：
$(new Option('myText', 'val')).appendTo('#mySelect');
を使うdocument.createElement（HTMLを構文解析する余分な作業を回避する$("<option></option>")）：
$('#mySelect').append($(document.createElement("option")).
attr("value","val").text("myText"));
これは見栄えがよく、読みやすさを提供しますが、他の方法よりも遅くなります。
$.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(''));
これらの答えはすべて不必要に複雑なようです。あなたが必要なのは：
var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
options[options.length] = new Option(value, key);
});
それは完全にクロスブラウザ互換です。
@joshperry
普通のようです.append期待通りに動作する、
$("mySelect").append(
$.map(selectValues, function(v,k){
return $("<option>").val(k).text(v);
})
);
$.weakmap可能にするGC - Chef_Codemap()のプロパティと組み合わさった構造体append()オブジェクトの配列を正しく追加するために！ - Jochem Schulenklopper
警告します...私は、Android 2.2（Cyanogen 7.0.1）の電話（T-Mobile G2）でjQuery Mobile 1.0b2をPhoneGap 1.0.0と使用していますが、.append（）メソッドをまったく動作させることができませんでした。私は次のように.html（）を使わなければなりませんでした：
var options;
$.each(data, function(index, object) {
options += '<option value="' + object.id + '">' + object.stop + '</option>';
});
$('#selectMenu').html(options);
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
を使用してアプローチがありますマイクロソフトのテンプレート手法これは現在jQueryコアに含めることを提案中です。テンプレートを使用することにはより多くの力があるので、最も単純なシナリオでは、それは最良の選択肢ではないかもしれません。詳細については、Scott Guによる記事の概要を参照してください。
最初に利用可能なtemplating 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");
Iましたブログ記事より詳細にこのアプローチ。
私はこのようなものを作りました、Ajax経由でドロップダウンアイテムをロードする。上記の応答も受け入れられますが、パフォーマンスを向上させるためにDOMの変更をできるだけ少なくするのが常に良い方法です。
そのため、ループ内に各項目を追加するよりも、ループ内で項目を収集し、完了したらそれを追加することをお勧めします。
$(data).each(function(){
... Collect items
})
それを追加
$('#select_id').append(items);
あるいはもっと良い
$('#select_id').html(items);
「ワンライナー」で、上位2つの答えの間のソートの妥協点：
$.fn.append.apply($('mySelect'),
$.map(selectValues, function(val, idx) {
return $("<option/>")
.val(val.key)
.text(val.value);
})
);
を使用してOption要素の配列を作成します。地図次に、を使用して、それらすべてを一度にSelectに追加します。apply各Optionをに別々の引数として送るappend関数。
簡単な方法は：
$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");
function populateDropdown(select, data) {
select.html('');
$.each(data, function(id, option) {
select.append($('<option></option>').val(option.value).html(option.name));
});
}
それはjQuery 1.4.1でうまく動作します。
ASP.NET MVCで動的リストを使用するための完全な記事jQueryの訪問：http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx
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));
});
それをするもう一つの方法：
var options = [];
$.each(selectValues, function(key, value) {
options.push($("<option/>", {
value: key,
text: value
}));
});
$('#mySelect').append(options);
$('#mySelect')それから@rocktheroadの回答をリファクタリングしました。 - Chef_Code
if (data.length != 0) {
var opts = "";
for (i in data)
opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";
$("#myselect").empty().append(opts);
}
これは最初に巨大な文字列を構築した後に一度だけDOMを操作します。
$("#myselect").empty().append(opts);とgetElementById('myselect').innerHtml = opts; - vahanpwns
前の答えはすべて有効な答えです - 最初にこれらすべてを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);
$.eachより遅いですforループ$("#mySelect").append();したがって、最善の解決策は次のとおりです。
JSONデータの場合respです
[
{"id":"0001", "name":"Mr. P"},
{"id":"0003", "name":"Mr. Q"},
{"id":"0054", "name":"Mr. R"},
{"id":"0061", "name":"Mr. S"}
]
として使用
var option = "";
for (i=0; i<resp.length; i++) {
option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);
emp_id？ - Chris22
どこでも同じコードを繰り返すのではなく、次のような独自のjQuery関数を書くことがより望ましいことをお勧めします。
jQuery.fn.addOption = function (key, value) {
$(this).append($('<option>', { value: key }).text(value));
};
それから、オプションを追加するために、単に以下をしてください：
$('select').addOption('0', 'None');
次のコードでjson配列を反復処理するだけです。
$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");
jQueryプラグインはここにあります。http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/。
私はこれが単純で素晴らしい仕事であることを知りました。
for (var i = 0; i < array.length; i++) {
$('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};
それが私が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();
}
}
JSONフォーマット：
[{
"org_name": "Asset Management"
}, {
"org_name": "Debt Equity Foreign services"
}, {
"org_name": "Credit Services"
}]
そして、Ajaxの成功時にDropdownに値を移入するための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
}
$ .map（）関数を使用すると、よりエレガントな方法でこれを実行できます。
$('#mySelect').html( $.map(selectValues, function(val, key){
return '<option value="' + val + '">'+ key + '</option>';
}).join(''));
$.each(selectValues, function(key, value) {
$('#mySelect').append($("<option/>", {
value: key, text: value
}));
});
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(''));
<!DOCTYPE html>
<html lang="en">
<head>
<title>append selectbox using jquery</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function setprice(){
var selectValues = { "1": "test 1", "2": "test 2" };
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
}
</script>
</head>
<body onload="setprice();">
<select class="form-control" id="mySelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</body>
</html>
value引用符で囲む必要はない文字列（およびハードコード）です。 - Darryl Hein