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

Javascript
为调试JavaScript添加输出窗口的代码
Js 中debug方式
一些mootools的学习资源
JavaScript 精粹读书笔记(1,2)
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
数组Array进行原型prototype扩展后带来的for in遍历问题
javascript 鼠标拖动图标技术
比较搞笑的js陷阱题
js 自定义的联动下拉框
js 省地市级联选择
JavaScript 类似flash效果的立体图片浏览器
JavaScript Event学习第九章 鼠标事件
jQuery AJAX回调函数this指向问题
toString()一个会自动调用的方法
jQuery 文本框模拟下拉列表效果
关于页面被拦截的问题
javascript 解析url的search方法
一个XML格式数据转换为图表的例子
Javascript 获取链接(url)参数的方法[正则与截取字符串]
一些收集整理非常不错的JS效果代码

No. « 285 286 287 288 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-10   浏览: 95 ::
收藏到网摘: 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>