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.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()構造函數創建option對象
selectTag.options.add(item); // 添加到options集合中
}

watchState();
}
// 添加新option項前是否清空當前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();
}
// 創建一個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();
}
// 獲取當前選定的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 " ;
}

< BODY >
< Select name ="SelectBox" >
</ Select >
< hr />
< div id ="divWatch" style ="background-color:beige;width=220;" >
</ div >
< hr />
< h4 > 使用隨機數初始化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 >