[著者]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>
动态生成select选项全接触[1]
[入库：2005年8月18日] [更新：2007年3月24日]
本文简介：选择自 zosatapo 的 blog
本文关键：javascript zostapo option select
本站最佳浏览方式为 分辨率 1024x768 IE 6.0（或更高版本的 IE浏览器）
