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对象只能使用一次，示例： var oOption = document.createElement(OPTION); oOption.text = tag + i; oOption.value = tag + i; selCrl_1. add(oOption); /注意，这步调用会错误，你必须重新创建一个OPTION对象 selCrl_2. add(oOption); 本例完整的示例代码见附件中的1.htm var oOption = document.createElement(OPTION); oOption.text = tag + _ + i; oOption.value = tag + _ + i; selCrl.add(oOption); 添加条目的另外一个方法 我们也可以直接操作Select控件的OPTIONS集合来完成添加条目的工作，直接操作的时候有一个要注意的地方就是要指定SELECT控件的length属性，指定OPTIONS集合元素的最大个数。代码例子： var selCrl = document.getElementById(selCrlId); /必须指定长度 var oldLen = selCrl.length; var tag = 另外一种方法; 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方法只有一个参数，就是你要删除的元素的索引（下标）。代码例子： var selCrl = document.getElementById(selCrlId); selCrl.remove(0); 3.3. 动态编辑条目 动态编辑条目其实很简单，你只需要修改Option对象的text或者value属性就可以了。代码如下： var selCrl = document.getElementById(selCrlId); var conCrl = document.getElementById(con); if(conCrl.value.length = 0) conCrl.value = 您没有指定修改的内容！; selCrl.optionsselCrl.selectedIndex.text = conCrl.value; 3.4. 添加分组 在HTML 4.0中给SELECT对象添加了一个新的属性，分组（optGroup），使用这个新特新，我们可以把SELECT展现的数据按照类别展示。代码如下： var selCrl = document.getElementById(selCrlId); var optGroup = document.createElement(optGroup); optGroup.label = fdsafsdafsafasd; selCrl. appendChild (optGroup) tag = abc; var oOption = document.createElement(OPTION); oOption.text = tag + _ + xxxx; oOption.value = tag + _ + xxxx; selCrl.add(oOption); 注意：添加optGroup 的时候注意要用appendChild方法。 3.5. onchange事件 onchange事件是SELECT控件很常使用到的一个时间。它在SELECT控件条目选择改变的时候触发。使用Onchange事件的时候有一个selectedIndex成员很重要，它表示当前选中的条目索引。如果你要使用onchange事件，你可以这么写： ，其中onchange1就是onchange事件触发时调用的函数。 3.6. 总结 关于SELECT控件还有许多特性没有描述，这里记述的只是一小部分内容而已。希望可以和大家探讨编程相关的内容。我的mail： 裤衩飘飘于2006-11-23夜 附录： 完整的代码如下（把下面的代码拷贝出去保存成.htm文件用IE打开即可看到效果） function useNameControlSelect(tag) if(tag = name) var selCrl = document.all(selCrlName); tag = selCrlName; else var selCrl = document.getElementById(selCrlId); tag = selCrlId; startIndex = selCrl.length; endIndex = selCrl.length + 10; for(i = startIndex; i endIndex; i +) var oOption = document.createElement(OPTION); oOption.text = tag + _ + i; oOption.value = tag + _ + i; selCrl.add(oOption); function addItem() var selCrl = document.getElementById(selCrlId); /必须指定长度 var oldLen = selCrl.length; var tag = 另外一种方法; selCrl.length += 10; for(i = oldLen; i oldLen + 10; i +) selCrl.options.text = tag + _ + i; selCrl.options.value = tag + _ + i; function delItem() var selCrl = document.getElementById(selCrlId); selCrl.remove(selCrl.selectedIndex); function editItem() var selCrl = document.getElementById(selCrlId); var conCrl = document.getElementById(con); if(conCrl.value.length = 0) conCrl.value = 您没有指定修改的内容！; selCrl.optionsselCrl.selectedIndex.text = conCrl.value; function addOptGroup() var selCrl = document.getElementById(selCrlId); var optGroup = document.createElement(optGroup); optGroup.label = fdsafsdafsafasd; selCrl.appendChild(optGroup) tag = abc; var oOption = document.createElement(OPTION); oOption.text = tag + _ + xxxx; oOption.value = tag + _ + xxxx; selCrl.add(oOption); function dealChange(objBut) var s1 = 启用Onchange事件; var s2 = 停用Onchange事件; var selCrl = document.getElementById(selCrlId); if(objBut.value = s1) objBut.value = s2; selCrl.onchange = onchange1; else