JS编程SELECT控件使用.doc

3.JS编程.SELECT控件使用
Select控件是我们在网页编程中经常用到的控件之一,下面介绍几个常见功能的用法。
3.1.动态添加条目
SELECT控件包含很多的属性、方法、事件、集合，用以满足SELECT控件的使用需要。SELECT控件中下拉的那些选项就是通过OPTIONS这个集合来维护的，这里所谓的集合你完全可以当作C中的数组来理解，配合OPTIONS使用的还有一个length属性，length属性可以用来指定OPTIONS中元素的个数。
要在JS里面操作SELECT控件，必须首先获取到SELECT控件对象。常用的获取对象的方法有document.all(“SELECT_CRL_NAME”)或者document.getElementById(“SELECT_CRL_ID”)。
使用OPTION对象添加条目
找到SELECT控件后，创建一个OPTION对象，调用SELECT控件的ADD方法就可以在SELECT控件中添加一个下拉条目了。使用这种方法添加条目的时候要注意一个OPTION对象只能使用一次，示例：
varoOption=document.createElement("OPTION");
oOption.text=tag+i;
oOption.value=tag+i;
selCrl_1.add(oOption);
//注意，这步调用会错误，你必须重新创建一个OPTION对象
selCrl_2.add(oOption);
本例完整的示例代码见附件中的1.htm
varoOption=document.createElement("OPTION");
oOption.text=tag+"_"+i;
oOption.value=tag+"_"+i;
selCrl.add(oOption);
添加条目的另外一个方法
我们也可以直接操作Select控件的OPTIONS集合来完成添加条目的工作，直接操作的时候有一个要注意的地方就是要指定SELECT控件的length属性，指定OPTIONS集合元素的最大个数。代码例子：
varselCrl=document.getElementById("selCrlId");
//必须指定长度
varoldLen=selCrl.length;
vartag="另外一种方法";
selCrl.length+=10;
for(i=oldLen;i<oldLen+10;i++){
selCrl.options.text=tag+"_"+i;
selCrl.options.value=tag+"_"+i;
}
3.2.动态删除条目
如果你要删除一个条目，那也很简单，你只需要调用SELECT的remove方法就可以了，remove方法只有一个参数，就是你要删除的元素的索引（下标）。代码例子：
varselCrl=document.getElementById("selCrlId");
selCrl.remove(0);
3.3.动态编辑条目
动态编辑条目其实很简单，你只需要修改Option对象的text或者value属性就可以了。代码如下：
varselCrl=document.getElementById("selCrlId");
varconCrl=document.getElementById("con");
if(conCrl.value.length==0)
conCrl.value="您没有指定修改的内容！";
selCrl.options[selCrl.selectedIndex].text=conCrl.value;
3.4.添加分组
在HTML4.0中给SELECT对象添加了一个新的属性，分组（optGroup），使用这个新特新，我们可以把SELECT展现的数据按照类别展示。代码如下：
varselCrl=document.getElementById("selCrlId");
varoptGroup=document.createElement("optGroup");
optGroup.label="fdsafsdafsafasd";
selCrl.appendChild(optGroup)
tag="abc";
varoOption=document.createElement("OPTION");
oOption.text=tag+"_"+"xxxx";
oOption.value=tag+"_"+"xxxx";
selCrl.add(oOption);
注意：添加optGroup的时候注意要用appendChild方法。
3.5.onchange事件
onchange事件是SELECT控件很常使用到的一个时间。它在SELECT控件条目选择改变的时候触发。使用Onchan