|
javascript操作Select標(biāo)記中options集合
先來(lái)看看options集合的這幾個(gè)方法： options.add(option)方法向集合里添加一項(xiàng)option對(duì)象； options.remove(index)方法移除options集合中的指定項(xiàng)； options(index)或options.item(index)可以通過(guò)索引獲取options集合的指定項(xiàng)； javascript代碼如下： var selectTag = null; //select標(biāo)記 var OPTONLENGTH = 10; //每次填充option數(shù) var colls = []; //對(duì)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); //通過(guò)Option()構(gòu)造函數(shù)創(chuàng)建option對(duì)象 selectTag.options.add(item); //添加到options集合中 } watchState(); } //添加新option項(xiàng)前是否清空當(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); } } //添加一項(xiàng)新option function addOption(){ colls.add(createOption()); lastOptionOnFocus(colls.length-1); watchState(); } //創(chuàng)建一個(gè)option對(duì)象 function createOption(){ var random = Math.floor(Math.random()*9000)+1000; return new Option(random,random); } //刪除options集合中指定的一項(xiàng)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集合中最后一項(xiàng)獲取焦點(diǎn) 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)前項(xiàng)索引:" + getSelectedIndex(); innerHtml += "<br/>當(dāng)前項(xiàng)文本:" + getCurrentOptionText(getSelectedIndex()); innerHtml += "<br/>當(dāng)前項(xiàng)值:" + getCurrentOptionValue(getSelectedIndex()); divWatch.innerHTML = innerHtml; divWatch.align = "justify"; } 注意到上面創(chuàng)建option項(xiàng)時(shí)，使用了Option()構(gòu)造函數(shù)，這個(gè)構(gòu)造函數(shù)有兩個(gè)版本的重載。 1、var option = new Option(text,value); //這里要大寫(xiě)Option() 2、var option = new Option(); option.text = text; option.value=value; 我個(gè)人比較喜歡第一種方法來(lái)創(chuàng)建option對(duì)象。 另外，select標(biāo)記還有一個(gè)比較有用的屬性就是selectedIndex，通過(guò)它可能獲取當(dāng)前選擇的option索引，或通過(guò)索引設(shè)置指定options集合中哪一項(xiàng)被選擇。 select.selctedIndex = select.options.length-1; //將options集合中最后一項(xiàng)選中 var selectedItem = select.options(select.selectedIndex);//獲取當(dāng)前選中項(xiàng) selectedItem.text; //選中項(xiàng)的文本 selectedItem.value; //選中項(xiàng)的值 <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項(xiàng)</h4> <input type="button" value="create" onclick="addOption()"/> <hr/> <h4>刪除option項(xiàng)</h4> <input type="button" value="delete" onclick="removeOption(colls.length-1)"/> </BODY> 檢測(cè)是否有選中 if(objSelect.selectedIndex > -1) { //說(shuō)明選中 } else { //說(shuō)明沒(méi)有選中 } 刪除被選中的項(xiàng) objSelect.options[objSelect.selectedIndex] = null; 增加項(xiàng) objSelect.options[objSelect.length] = new Option("你好","hello"); 修改所選擇中的項(xiàng) objSelect.options[objSelect.selectedIndex] = new Option("你好","hello"); 得到所選擇項(xiàng)的文本 objSelect.options[objSelect.selectedIndex].text; 得到所選擇項(xiàng)的值 objSelect.options[objSelect.selectedIndex].value; |
|
|
