当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 动态生成select选项全接触

Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
JS Array对象入门分析
javascript typeof的用法与typeof运算符介绍[详细]
js CSS操作方法集合
让任务管理器中的CPU跳舞的js代码
ajax无刷新动态调用股票信息(改良版)
js Clip的奇思妙想之文字拼接效果
js Clip奇思妙想之多彩渐变字效果
JS 创建对象(常见的几种方法)
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
JS提交并解析后台返回的XML的代码
初学Javascript的一些总结
JS 继承实例分析
js form action动态修改方法
仿163填写邮件地址自动显示下拉（无优化）
js判断对象是否是某一类型
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
js 目录列举函数
js颜色选择器代码[firefox不支持]
js wmp操作代码小结(音乐连播功能)

No. « 115 116 117 118 »

技术文章搜索

关键字

Javascript 中的 动态生成select选项全接触

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-10   浏览: 428 ::
收藏到网摘: n/a

[著者]zosatapo
[联系][email protected]
[文章简单说明]本文提供在不刷新页面的前提下，动态生成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>