36

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

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

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

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

4

2 に答える 2

88

ループを使用forして配列を反復処理します。文字列ごとに、新しいoption要素を作成し、文字列をそのinnerHTMLandとして割り当て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);
}

デモ

更新:createDocumentFragmentと の使用forEach

ドキュメントに追加する要素のリストが非常に大きい場合、新しい要素を個別に追加するのは効率的ではありません。はDocumentFragment、エレメントの収集に使用できる軽量のドキュメント オブジェクトとして機能します。すべての要素の準備ができたら、単一のappendChild操作を実行して、DOM が何度も更新されるのではなく、1 回だけ更新されるようにします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);

デモ

于 2012-06-29T02:15:29.430 に答える
4

これは、私が最近書いた 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() が機能していなかったため、同様に機能する別の可能性を提示することにしたためです。

于 2016-04-29T09:19:14.097 に答える