javascript配列を使用してドロップダウン選択ボックスを埋める

Question

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

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

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

私はハード簡単にするために、配列をコード化している、「CuisineListは」ボックス

Answer 1

ダウン私のドロップがあなたの配列を反復処理する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

UPDATE：あなたは、ドキュメントに追加する要素の非常に大きなリストを持っている場合はcreateDocumentFragmentと

forEachを使用して、追加する非パフォーマンスすることができ新しい要素はそれぞれ個別にDocumentFragmentは、要素を収集するために使用できる軽量ドキュメントオブジェクトとして機能します。すべての要素が準備できたら、appendChild操作を実行して、DOMがn回ではなく1回だけ更新されるようにすることができます。

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

Answer 2

これは最近書かれたREST-サービスI'veから一部です。

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（）は私がaswell働く別の可能性を設置することを決めたので、私の場合で働いwasn'tので、イム投稿これが理由。