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毫秒

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

  • 相关阅读:
    deploy.sh
    error cross-zip@4.0.0: The engine "node" is incompatible with this module. Expected version ">=12.10". Got "10.16.3"
    could not compile E:\sqjw-web\node_modules\@nuxt\vue-app\template\App.js:connot resolve "element-ui/lib/theme-chalk/index.css"
    js如何查看元素类型
    修改tomcat浏览器地址栏图标
    a different object with the same identifier value was already associated withthe session异常解决方案
    org.springframework.dao.InvalidDataAccessApiUsageException:The given object has a null identifi的解决方案
    利用JS验证查询参数-选择月份后必须选择年份
    算术运算函数
    数据的输出与数值传递
  • 原文地址:https://www.cnblogs.com/myssh/p/1436989.html
Copyright © 2011-2022 走看看