动态生成select框内容

由于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 ="" >
   < script  language ="javascript" >
    //下拉框的内容
    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;
    }
    //点击选择框动态生成下拉框中内容
    function showcolor(obj){
        var colorSel= document.getElementById("example");
        var array = initcolorArray();
        for(i=0;i<array.length;i++){
            colorSel.options[i]=new Option(array[i],i);
        }
        colorSel.options[9].selected=true;
        obj.onclick="";
    }
    //初始化选择框
    function init(){
        var colorSel= document.getElementById("example");
        colorSel.options[0]=new Option("暗红色",0);

    }    
    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 >
  < script  language ="javascript" >
    init();
  </ script >
</ HTML >

大家有没有更好的方法，发表一下。

Keyword:  动态select,下拉框,动态下拉框,下拉框选中,select加载,select动态数据

转载于:https://www.cnblogs.com/Qizai/archive/2007/09/01/878571.html