动态生成select选项全接触
2007-11-27 17:24:31 来源：WEB开发网核心提示：[著者]zosatapo[联系]dertyang@263.net[文章简单说明]本文提供在不刷新页面的前提下，动态生成select选项的目前比较主流的三种方案，动态生成select选项全接触，并且提供简单效率测试，网页制作人员可以根据自己需要选择，但是我提供我写的全部代码，希望有兴趣的同行研究一下，由于时间问题，我没有
[著者]zosatapo
[联系]dertyang@263.net
[文章简单说明]本文提供在不刷新页面的前提下，动态生成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>
[联系]dertyang@263.net
[文章简单说明]本文提供在不刷新页面的前提下，动态生成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>
中查找“动态生成select选项全接触”更多相关内容
中查找“动态生成select选项全接触”更多相关内容更多精彩
赞助商链接
