文提供在不刷新页面的前提下,动态生成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>
|