[JavaScript] 動態增加下拉式選單

下面三種都是動態增加下拉式選單 選項的語法...雖然都能達到相同的效果
但是寫的方式不同, 其效率也有很大的差別,給大家參考一下

function option(){
var opt;
var start;
var end;

start=new Date();
selContainer.innerHTML="";
selContainer.innerHTML="<select id='selShow' onchange='change(this);'></select>";

for(i=0;i<opttext.length;i++)
{ opt=new Option();
//or you may code like below:
//opt=document.createElement("OPTION");
opt.text=opttext[i];
opt.value=optvalue[i];
selShow.options.add(opt);
}

end=new Date();
optionTime.innerText="The Operation Took Time:"+(end.getTime()-start.getTime())+" milliseconds";

}

function object()
{
var start;
var end;
var str="<select id='selShow' onchange='change(this);'>";

start=new Date();
selContainer.innerHTML="";

for(i=0;i<opttext.length;i++)
{
str+="<option value='"+optvalue[i]+"'>"+opttext[i]+"</option>";
}

str+="</select>";
selContainer.innerHTML=str;

end=new Date();
objectTime.innerText="The Operation Took Time:"+(end.getTime()-start.getTime())+" milliseconds";
}

function join()
{
var len=opttext.length;
var arr=new Array(len);
var start;
var end;

start=new Date();
selContainer.innerHTML="";
joinTime.innerText="";

for(i=0;i<len;i++)
{
arr[i]="<option value='"+optvalue[i]+"'>"+opttext[i]+"</option>";
}
selContainer.innerHTML="<select id='selShow' onchange='change(this);'>"+arr.join()+"</select>";

end=new Date();
joinTime.innerText="The Operation Took Time:"+(end.getTime()-start.getTime())+" milliseconds";
}

# option() 最慢 ，object() 次之，join() 最快

附上完整範例在附件中，供大家參考

來源：某不知名大陸網友發表.....