(轉載)javascript操作Select標記中options集合
阿新 • • 發佈：2019-02-15
var selectTag =null; //select標記var OPTONLENGTH =10; //每次填充option數var colls = []; //對select標記options的引用
window.onload =function(){
selectTag = document.getElementById("SelectBox"); //獲取select標記 colls = selectTag.options; //獲取引用//initSelectBox(); //自初始化select.options
}; //使用隨機數填充select.optionsfunction 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() item =new Option(random,random); //通過Option()建構函式建立option物件 selectTag.options.add(item); //新增到options集合中 } watchState(); } //新增新option項前是否清空當前optionsfunction 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); } } //新增一項新optionfunction addOption(){ colls.add(createOption()); lastOptionOnFocus(colls.length-1); watchState(); } //建立一個option物件function createOption(){ var random = Math.floor(Math.random()*9000)+1000; returnnew Option(random,random); } //刪除options集合中指定的一項optionfunction removeOption(index){ if(index >=0){ colls.remove(index); lastOptionOnFocus(colls.length-1); } watchState(); } //獲取當前選定的option索引function getSelectedIndex(){ return selectTag.selectedIndex; } //獲取options集合的總數function getOptionLength(){ return colls.length; } //獲取當前選定的option文字function getCurrentOptionValue(index){ if(index >=0) return colls(index).value; } //獲取當前選定的option值function getCurrentOptionText(index){ if(index >=0) return colls(index).text; } //使用options集合中最後一項獲取焦點function lastOptionOnFocus(index){ selectTag.selectedIndex = index; } //顯示當select標記狀態function watchState(){ var divWatch = document.getElementById("divWatch"); var innerHtml=""; innerHtml ="option總數:"+ getOptionLength(); innerHtml +="<br/>當前項索引:"+ getSelectedIndex(); innerHtml +="<br/>當前項文字:"+ getCurrentOptionText(getSelectedIndex()); innerHtml +="<br/>當前項值:"+ getCurrentOptionValue(getSelectedIndex()); divWatch.innerHTML = innerHtml; divWatch.align ="justify"; }