动态生成select选项全接触

原创 2001年12月18日 09:27:00
[著者]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>
</span>
</BODY>
</HTML>

动态加载<select>选项

$(function(){ initializeSelect(); }); function initializeSelect() { var all="[{'name':'苹果',...
  • Varose
  • Varose
  • 2017年03月30日 09:40
  • 705

动态生成select的option

jsp页面上面有两个select,要当上面的select的option   change的时候,下面的select   中的option也跟着变     上面的:               议案 ...
  • jackeyabc
  • jackeyabc
  • 2007年01月11日 09:29
  • 2117

asp.net动态生成select下拉列表内容

  • handsometone1982
  • handsometone1982
  • 2012年07月09日 23:44
  • 3844

bootstrap-select动态组装下拉选项(option)

概述: 如果你想要使用bootstrap-select去检索的话,那么需要动态组装下拉框选项(option);...
  • m0_37355951
  • m0_37355951
  • 2017年10月20日 10:44
  • 2124

动态生成select,赋值问题

项目中select是要接口获取并赋值,然而,在做回显的时候不能马上赋值,可能是异步的原因吧,看了网上的说法,是在ajax上使用async:false,这个属性,但是并没有什么软用,你只要把赋值的操作放...
  • qq_26499247
  • qq_26499247
  • 2016年12月28日 16:17
  • 619

jquery动态生成的select无法通过jquery赋值

如果你是通过ajax发送的请求 然后生成select 那么就要设置同步方式(async: false)! 这样 你就可以在生成select以后 马上通过$("#XXX").va...
  • goodsun00
  • goodsun00
  • 2014年02月12日 11:37
  • 2842

[JavaScript] 动态生成下拉列表select的选项

想要动态的生成下拉列表select的选项html xmlns="http://www.w3.org/1999/xhtml" >head runat="server">    title>无标题页tit...
  • yiyiwyy326
  • yiyiwyy326
  • 2007年05月10日 13:24
  • 5597

动态修改select内的选项

var mySelect = document.getElementByIdx_x("id"); //获取select对象 mySelect.options.length = 0;  //每次添加前先...
  • lsfhack
  • lsfhack
  • 2017年04月08日 08:32
  • 355

JQuery获取和设置Select选项方法

JQuery获取和设置Select选项 获取Select :  获取select 选中的 text:   $("#ddlRegType").find("option:selected").text()...
  • Feiin
  • Feiin
  • 2009年02月16日 17:03
  • 67703

select下拉菜单所有选项均罗列显示

name="" id="selectLeft" multiple="multiple"> value="">1 value="">2 value="">3 value=...
  • euxil97
  • euxil97
  • 2017年09月03日 13:27
  • 364
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:动态生成select选项全接触
举报原因:
原因补充:

(最多只允许输入30个字)