|
javascript操作Select標(biāo)記中options集合
先來看看options集合的這幾個方法： options.add(option)方法向集合里添加一項option對象； options.remove(index)方法移除options集合中的指定項； options(index)或options.item(index)可以通過索引獲取options集合的指定項； javascript代碼如下： var selectTag = null; //select標(biāo)記 var OPTONLENGTH = 10; //每次填充option數(shù) var colls = []; //對select標(biāo)記options的引用 window.onload = function(){ selectTag = document.getElementById("SelectBox"); //獲取select標(biāo)記 colls = selectTag.options; //獲取引用 //initSelectBox(); //自初始化select.options }; //使用隨機(jī)數(shù)填充select.options function initSelectBox(){ var random = 0 ; var optionItem = null; var item = null; if(colls.length > 0 && isClearOption()){ clearOptions(colls); } for(var i=0;i<OPTONLENGTH;i++){ random = Math.floor(Math.random()*9000)+1000; item = new Option(random,random); //通過Option()構(gòu)造函數(shù)創(chuàng)建option對象 selectTag.options.add(item); //添加到options集合中 } watchState(); } //添加新option項前是否清空當(dāng)前options function isClearOption(){ return document.getElementById("chkClear").checked; } //清空options集合 function clearOptions(colls){ var length = colls.length; for(var i=length-1;i>=0;i--){ colls.remove(i); } } //添加一項新option function addOption(){ colls.add(createOption()); lastOptionOnFocus(colls.length-1); watchState(); } //創(chuàng)建一個option對象 function createOption(){ var random = Math.floor(Math.random()*9000)+1000; return new Option(random,random); } //刪除options集合中指定的一項option function removeOption(index){ if(index >= 0){ colls.remove(index); lastOptionOnFocus(colls.length-1); } watchState(); } //獲取當(dāng)前選定的option索引 function getSelectedIndex(){ return selectTag.selectedIndex; } //獲取options集合的總數(shù) function getOptionLength(){ return colls.length; } //獲取當(dāng)前選定的option文本 function getCurrentOptionValue(index){ if(index >= 0) return colls(index).value; } //獲取當(dāng)前選定的option值 function getCurrentOptionText(index){ if(index >= 0) return colls(index).text; } //使用options集合中最后一項獲取焦點 function lastOptionOnFocus(index){ selectTag.selectedIndex = index; } //顯示當(dāng)select標(biāo)記狀態(tài) function watchState(){ var divWatch = document.getElementById("divWatch"); var innerHtml=""; innerHtml = "option總數(shù):" + getOptionLength(); innerHtml += "<br/>當(dāng)前項索引:" + getSelectedIndex(); innerHtml += "<br/>當(dāng)前項文本:" + getCurrentOptionText(getSelectedIndex()); innerHtml += "<br/>當(dāng)前項值:" + getCurrentOptionValue(getSelectedIndex()); divWatch.innerHTML = innerHtml; divWatch.align = "justify"; } 注意到上面創(chuàng)建option項時，使用了Option()構(gòu)造函數(shù)，這個構(gòu)造函數(shù)有兩個版本的重載。 1、var option = new Option(text,value); //這里要大寫Option() 2、var option = new Option(); option.text = text; option.value=value; 我個人比較喜歡第一種方法來創(chuàng)建option對象。 另外，select標(biāo)記還有一個比較有用的屬性就是selectedIndex，通過它可能獲取當(dāng)前選擇的option索引，或通過索引設(shè)置指定options集合中哪一項被選擇。 select.selctedIndex = select.options.length-1; //將options集合中最后一項選中 var selectedItem = select.options(select.selectedIndex);//獲取當(dāng)前選中項 selectedItem.text; //選中項的文本 selectedItem.value; //選中項的值 <BODY> <Select name="SelectBox"> </Select> <hr/> <div id="divWatch" style="background-color:beige;width=220;"> </div> <hr/> <h4>使用隨機(jī)數(shù)初始化SelectBox</h4> <input type="button" value="Init" onclick="initSelectBox()"/> <input type="checkbox" name="chkClear"/>clear <hr/> <h4>添加option項</h4> <input type="button" value="create" onclick="addOption()"/> <hr/> <h4>刪除option項</h4> <input type="button" value="delete" onclick="removeOption(colls.length-1)"/> </BODY> 檢測是否有選中 if(objSelect.selectedIndex > -1) { //說明選中 } else { //說明沒有選中 } 刪除被選中的項 objSelect.options[objSelect.selectedIndex] = null; 增加項 objSelect.options[objSelect.length] = new Option("你好","hello"); 修改所選擇中的項 objSelect.options[objSelect.selectedIndex] = new Option("你好","hello"); 得到所選擇項的文本 objSelect.options[objSelect.selectedIndex].text; 得到所選擇項的值 objSelect.options[objSelect.selectedIndex].value; |
|
|
