web-dev-qa-db-ja.com

JavaScript配列を使用して、ドロップダウン選択ボックスを埋めます

私は、javascript配列にデータを読み込んで保存するテキストファイルを持っています。これは料理のリストです。配列を使用して、ドロップダウン選択ボックスを埋めたいです。私はドロップダウンボックスの値にハードコーディングする方法を知っています（間違っている場合は修正してください）が、代わりに配列を使用してそれを埋めることができるようにしたいです。

<script type="text/javascript">
var cuisines = ["Chinese","Indian"];            
</script>

<select id="CusineList"></select>

簡単にするために配列をハードコーディングしました。「CuisineList」は私のドロップダウンボックスです

javascripthtmldrop-down-menu
33
Ameya

forループを使用して、配列を反復処理します。各文字列に対して、新しいoption要素を作成し、その文字列をinnerHTMLおよびvalueとして割り当て、select要素に追加します。

var cuisines = ["Chinese","Indian"];     
var sel = document.getElementById('CuisineList');
for(var i = 0; i < cuisines.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = cuisines[i];
    opt.value = cuisines[i];
    sel.appendChild(opt);
}

[〜＃〜] demo [〜＃〜]

更新：createDocumentFragmentおよびforEachを使用

ドキュメントに追加する要素のリストが非常に大きい場合、新しい要素を個別に追加することはパフォーマンスが低下する可能性があります。 DocumentFragmentは、要素の収集に使用できる軽量のドキュメントオブジェクトとして機能します。すべての要素の準備ができたら、appendChild回ではなく、DOMが一度だけ更新されるように、単一のn操作を実行できます。

var cuisines = ["Chinese","Indian"];     

var sel = document.getElementById('CuisineList');
var fragment = document.createDocumentFragment();

cuisines.forEach(function(cuisine, index) {
    var opt = document.createElement('option');
    opt.innerHTML = cuisine;
    opt.value = cuisine;
    fragment.appendChild(opt);
});

sel.appendChild(fragment);

[〜＃〜] demo [〜＃〜]

80
jackwanders

これは、最近書いたRESTサービスの一部です。

var select = $("#productSelect")
for (var prop in data) {
    var option = document.createElement('option');
    option.innerHTML = data[prop].ProduktName
    option.value = data[prop].ProduktName;
    select.append(option)
}

これを投稿する理由は、appendChild（）が私のケースでは機能していなかったからです。

4
Alexander Heim