由于select框内容比较多,如果在页面初始化时就将select框的下拉列表中的内容也初始化好的话,页面显示比较慢.现在想在页面初始化时select框只显示选中的内容,只有在onclick事件发生时才将下拉列表的数据读入.
请看下面代码:
<
HTML
>
<
HEAD
>
<
TITLE
>
Test
</
TITLE
>
<
META
NAME
="Generator"
CONTENT
="EditPlus"
>
<
META
NAME
="Author"
CONTENT
=""
>
<
META
NAME
="Keywords"
CONTENT
=""
>
<
META
NAME
="Description"
CONTENT
=""
>
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
script
language
="javascript"
>
//下拉框的内容
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function initcolorArray()
{
var colorArray=new Array();
colorArray[0]="红色";
colorArray[1]="白色";
colorArray[2]="蓝色";
colorArray[3]="黑色";
colorArray[4]="橙色";
colorArray[5]="绿色";
colorArray[6]="灰色";
colorArray[7]="紫色";
colorArray[8]="墨绿色";
colorArray[9]="暗红色";
return colorArray;
}
//点击选择框动态生成下拉框中内容
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function showcolor(obj)
{
var colorSel= document.getElementById("example");
var array = initcolorArray();
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(i=0;i<array.length;i++)
{
colorSel.options[i]=new Option(array[i],i);
}
colorSel.options[9].selected=true;
obj.onclick="";
}
//初始化选择框
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function init()
{
var colorSel= document.getElementById("example");
colorSel.options[0]=new Option("暗红色",0);
![](/Images/OutliningIndicators/InBlock.gif)
}
window.onload=initcolorArray;
</
script
>
</
HEAD
>
<
BODY
>
颜色:
<
select
style
="width:120px"
onMouseOver
="showcolor(this);this.οnmοuseοver=null;alert('here');"
onclick
="showcolor(this)"
id
="example"
></
select
>
</
BODY
>
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
script
language
="javascript"
>
init();
</
script
>
</
HTML
>
![](/Images/OutliningIndicators/None.gif)
大家有没有更好的方法,发表一下。
Keyword: 动态select,下拉框,动态下拉框,下拉框选中,select加载,select动态数据