作者tomin (弱水三千 只取一瓢飲)
看板Web_Design
標題Re: [問題] 下拉式選單和multiple select
時間Wed Apr 11 02:02:11 2012
※ 引述《kerash (K.T)》之銘言:
: ※ 引述《cozywolf (cozywolf)》之銘言:
: : 1.下拉式選單可否使用迴圈
: : 比方說出生年的選項從1900-2012
: : 我必須要用<option>打113欄@@
: : 還是有指令可直接幫我跑出這113項
: 既然都打了順便補上這個問題的code
: var selectNode = document.getElementById("birthYears");
: for(var y=1990;y<2013;y++)
: {
: var optNode = document.createElement("option");
: optNode.text= y;
: optNode.value=y;
: selectNode.appendChild(optNode);
: }
我一眼看到這段code appendChild 100多次
DOM也要改變這麼多次 感覺會很慢
應該可以用innerHTML一次append
var selectNode = document.getElementById("birthYears");
var optNode = [];
for(var y=1990;y<2013;y++)
{
optNode.push("<option value='" + y + "'>" + y + "</option>");
}
selectNode.innerHTML = optNode.join("");
如同這篇講的 innerHTML應該可以比appendChild快一點
http://hi.baidu.com/meteoric_cry/blog/item/07e182a1bee73c8246106485.html
不過我跑benchmark 似乎appendChild比較快
裡面的runTest慎點 有機會掛掉瀏覽器
http://jsperf.com/appendinner
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.24.79.34
推 kerash:恩恩@@ 我有想過用innerHTML,但是我怕用inner跟用append 04/11 08:55
→ kerash:在之後一些地方的處理上會不會有問題,所以才用 append 04/11 08:55
→ kerash:而且用 append 感覺比較像是有在照流程一個一個加上去XD 04/11 08:56
推 kerash:不過謝謝分享QQ/ 04/11 08:57