javascript - 一度にhtml selectに複数のオプションを追加する

Question

html selectに複数のオプションを追加したい。

現在、ループで以下のコードを使用していますが、毎回新しいオプションを追加する必要があるため、作業が遅くなります。

コードスニペット：

s.options[s.options.length]= new Option(url, '1');

したがって、上記のように 1 つずつ追加するのではなく、すべてのオプションを一度に追加できれば、少しは速くなるかもしれません。

これよりも高速な関数を提案してください。ありがとう

Answer 1

でできるかもしれませんが、DocumentFragmentブラウザのサポートについてはわかりません。確かに、すべてのブラウザー (IE 10 を含む) の現在のバージョンで動作しますが、古い IE では動作するとは思えません。

var frag = document.createDocumentFragment();
for (var i = 0; i < 10; ++i) {
    var option = document.createElement("option");
    option.value = "" + i;
    option.text = "Option " + i;
    frag.appendChild(option);
}

s.appendChild(frag);

デモ: http://jsfiddle.net/QsNpe/

Answer 2

これを試して

var dataArr = [{'value':'val1','text':'text1'},
               {'value':'val2','text':'text2'},
               {'value':'val3','text':'text3'},
               {'value':'val4','text':'text4'},
               {'value':'val5','text':'text5'},
               {'value':'val6','text':'text6'},
               {'value':'val7','text':'text7'}];

// Removes all options for the select box
$('#optExample option').remove();

// .each loops through the array
$.each(dataArr, function(i){
    $('#optExample').append($("<option></option>")
                    .attr("value",dataArr[i]['value'])
                    .text(dataArr[i]['text']));
});