zoukankan      html  css  js  c++  java
  • 动态生成select选项全接触Javascript技术【转】

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

     原文作者并没有测试,这里我来测试了一下,结果好惊人,第一个方法要1574毫秒,第二个154毫秒,最后一个31毫秒

    结果很让人惊讶吧,当然如果机器的性能好的话,结果和我测试的肯定有变化的.....

  • 相关阅读:
    WebPart 生存周期
    【Linq to SharePoint】对列表查询的分页技术
    新闻联播 代码
    首页顶部图片带Flash代码
    [翻译]简单谈谈事件与委托
    asp.net调试
    ASP.NET 2.0加密Web.config 配置文件
    网站用户登录和验证的资料
    Membership的一些资料
    asp.net网站登录的一些资料。
  • 原文地址:https://www.cnblogs.com/myssh/p/1436989.html
Copyright © 2011-2022 走看看