?本文提供在不刷新頁面的前提下，動態生成select選項的
目前比較主流的三種方案。并且提供簡單效率測試，網頁制作人員可以
根據自己需要選擇。
由于時間問題，我沒有能寫文章說明一下，但是我提供我寫的全部代碼。
希望有興趣的同行研究一下。
代碼寫的應該是很詳細的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
body{font-family:Courier New, Courier}
select{font-size:8pt;font-family:Courier New, Courier}
input{font-size:8pt;font-family:Courier New, Courier}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var opttext= new Array(1000);
var optvalue=new Array(1000);
function change(object){
opt=object.options[object.selectedIndex];
alert(opt.value+" : "+opt.text);
}
for(i=0;i<opttext.length;i++)
{
opttext[i]="zosatapo"+i;
optvalue[i]="name"+i;
}
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";
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<p align=center><B><FONT SIZE=4>動態生成SELECT選項演示大全</FONT></B></p>
Method I:<font color=blue> options.add()</font><br>
<Input type="Button" value="New Option" onclick="option();">
<span id="optionTime">test</span><br><BR>
Method I:<font color=blue>object.innerHTML</font><br>
<Input type="Button" value="Object InnerHTML" onclick="object();">
<span id="objectTime">test</span><br><BR>
Method I:<font color=blue>object.innerHTML & Array.join()</font><br>
<Input type="Button" value="Array Join" onclick="join();">
<span id="joinTime"><a href=#>test</a></span><br><BR>
<font color=blue>演示效果預覽區域：</font><br><br>
<span id="selContainer">
<select id="selShow"><option >Empty</option></select>
</span>
</BODY>
</HTML>
posted on 2006-08-22 16:20
保爾任 閱讀(416)
評論(0) 編輯 收藏