动态生成select框内容的问题,请高手指点谢谢

zxaibulams 2007-09-01 03:58:03

由于select框内容比较多,如果在页面初始化时就将select框的下拉列表中的内容也初始化好的话,页面显示比较慢.现在想在页面初始化时select框只显示选中的内容,只有在onclick事件发生时才将下拉列表的数据读入.但现在有一个问题就是在第一次点中select框时,下拉列表中的内容不能被选中.我有一个事例程序如下:
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<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);

}
</script>
<BODY>
城市：<select style="width:120px" onclick="showcolor(this)" id="example"><select>
</BODY>
<script language="javascript">
init();
</script>
</HTML>
请高手指点一下该如何解决谢谢

...全文

209 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

xingqiliudehuanghun 2007-09-01

打赏
举报

最笨的方法
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<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>
<BODY>
城市：<select style="width:120px" onMouseOver="showcolor(this);this.onmouseover=null;alert('here');" onclick="showcolor(this)" id="example"></select>
</BODY>
<script language="javascript">
init();
</script>
</HTML>

cymple 2007-09-01

打赏
举报

以前遇到同样的问题
模拟了一个下拉动作才能动态加载.

penglewen 2007-09-01

打赏
举报

放在onfocus事件中,也会出现相同的情况.
感觉还是要回到页面初始化时就加载.

zhuiganzhe_88 2007-09-01

打赏
举报

shuangbaby(Fantasy And Reality) 的思路对头

不过第一种方案好像不用这么麻烦吧

shuangbaby 2007-09-01

打赏
举报

1.放在onload事件里在加个延迟时间显示

try{
HTMLElement.prototype.attachEvent = function(EventStr,EventFun){
this.addEventListener(EventStr.substring(2), EventFun, false);
};
}catch(e){}
//=============================================
window.attachEvent("onload", function(){setTimeout(loadEventProc,1000);});

function loadEventProc()
{
showcolor(document.getElementById('example'));//TODO
}

2.或在select前面的表单的onfocus事件处理