JS編程SELECT控件使用

1、3. JS編程.SELECT控件使用Select控件是我們在網(wǎng)頁編程中經(jīng)常用到的控件之一,下面介紹幾個常見功能的用法。3.1. 動態(tài)添加條目SELECT控件包含很多的屬性、方法、事件、集合，用以滿足SELECT控件的使用需要。SELECT控件中下拉的那些選項就是通過OPTIONS這個集合來維護(hù)的，這里所謂的集合你完全可以當(dāng)作C中的數(shù)組來理解，配合OPTIONS使用的還有一個length屬性，length屬性可以用來指定OPTIONS中元素的個數(shù)。要在JS里面操作SELECT控件，必須首先獲取到SELECT控件對象。常用的獲取對象的方法有document.all(“SELECT_CRL_NAME

2、”) 或者document. getElementById(“SELECT_CRL_ID”)。使用OPTION對象添加條目找到SELECT控件后，創(chuàng)建一個OPTION對象，調(diào)用SELECT控件的ADD方法就可以在SELECT控件中添加一個下拉條目了。使用這種方法添加條目的時候要注意一個OPTION對象只能使用一次，示例：var oOption = document.createElement("OPTION");oOption.text = tag + i;oOption.value = tag + i;selCrl_1. add(oOption);/注意，這步調(diào)用會錯誤，

3、你必須重新創(chuàng)建一個OPTION對象selCrl_2. add(oOption);本例完整的示例代碼見附件中的1.htmvar oOption = document.createElement("OPTION");oOption.text = tag + "_" + i;oOption.value = tag + "_" + i;selCrl.add(oOption);添加條目的另外一個方法我們也可以直接操作Select控件的OPTIONS集合來完成添加條目的工作，直接操作的時候有一個要注意的地方就是要指定SELECT控件的length

4、屬性，指定OPTIONS集合元素的最大個數(shù)。代碼例子：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

5、;3.2. 動態(tài)刪除條目如果你要刪除一個條目，那也很簡單，你只需要調(diào)用SELECT的remove方法就可以了，remove方法只有一個參數(shù)，就是你要刪除的元素的索引（下標(biāo)）。代碼例子：var selCrl = document.getElementById("selCrlId");selCrl.remove(0);3.3. 動態(tài)編輯條目動態(tài)編輯條目其實很簡單，你只需要修改Option對象的text或者value屬性就可以了。代碼如下：var selCrl = document.getElementById("selCrlId");var conCrl =

6、 document.getElementById("con");if(conCrl.value.length = 0)conCrl.value = "您沒有指定修改的內(nèi)容！"selCrl.optionsselCrl.selectedIndex.text = conCrl.value;3.4. 添加分組在HTML 4.0中給SELECT對象添加了一個新的屬性，分組（optGroup），使用這個新特新，我們可以把SELECT展現(xiàn)的數(shù)據(jù)按照類別展示。代碼如下：var selCrl = document.getElementById("selCrlId

7、");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 + "

8、;_" + "xxxx"selCrl.add(oOption);注意：添加optGroup 的時候注意要用appendChild方法。3.5. onchange事件onchange事件是SELECT控件很常使用到的一個時間。它在SELECT控件條目選擇改變的時候觸發(fā)。使用Onchange事件的時候有一個selectedIndex成員很重要，它表示當(dāng)前選中的條目索引。如果你要使用onchange事件，你可以這么寫：<select name="selCrlName" id="selCrlId" onchange="

9、;onchange1()"></select>，其中onchange1就是onchange事件觸發(fā)時調(diào)用的函數(shù)。3.6. 總結(jié)關(guān)于SELECT控件還有許多特性沒有描述，這里記述的只是一小部分內(nèi)容而已。希望可以和大家探討編程相關(guān)的內(nèi)容。我的mail：elxf99褲衩飄飄于2006-11-23夜附錄：完整的代碼如下（把下面的代碼拷貝出去保存成.htm文件用IE打開即可看到效果） <script language="JavaScript">function useNameControlSelect(tag)if(tag = "na

10、me")var selCrl = document.all("selCrlName");tag = "selCrlName"elsevar selCrl = document.getElementById("selCrlId");tag = "selCrlId"startIndex = selCrl.length;endIndex = selCrl.length + 10;for(i = startIndex; i < endIndex; i +)var oOption = document.cre

11、ateElement("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 = o

12、ldLen; 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("

13、selCrlId"); var conCrl = document.getElementById("con");if(conCrl.value.length = 0)conCrl.value = "您沒有指定修改的內(nèi)容！"selCrl.optionsselCrl.selectedIndex.text = conCrl.value; function addOptGroup()var selCrl = document.getElementById("selCrlId"); var optGroup = document.cr

14、eateElement("optGroup"); optGroup.label = "fdsafsdafsafasd"selCrl.appendChild(optGroup)tag = "abc"var oOption = document.createElement("OPTION"); oOption.text = tag + "_" + "xxxx"oOption.value = tag + "_" + "xxxx"selCrl.

15、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;elseobjBut.value = s1;selCrl.onchange = null;function onchange1()var

16、 selCrl = document.getElementById("selCrlId");/alert(selCrl.selectedIndex)alert(selCrl.optionsselCrl.selectedIndex.text);</script><select name="selCrlName" id="selCrlId" onchange="onchange1()"></select><input type="button" value=

17、"用SELECT的NAME屬性操作SELECT控件" onclick="useNameControlSelect('name')"><input type="button" value="用SELECT的ID屬性操作SELECT控件" onclick="useNameControlSelect('id')"><input type="button" value="用另外一種方法添加條目" onclick="addItem()"> <input type="button" value="刪除當(dāng)前選中條目" onclick="delItem()"><input type="button" value="添加分組" onclick="addOptGroup()"><input type=&q