先来看看options集合的这几个方法:
options.add(option)方法向集合里添加一项option对象;
options.remove(index)方法移除options集合中的指定项;
options(index)或options.item(index)可以通过索引获取options集合的指定项;
javascript代码如下:
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";
}
注意到上面创建option项时,使用了Option()构造函数,这个构造函数有两个版本的重载。
1、var option = new Option(text,value); //这里要大写Option()
2、var option = new Option();
option.text = text;
option.value=value;
我个人比较喜欢第一种方法来创建option对象。
另外,select标记还有一个比较有用的属性就是selectedIndex,通过它可能获取当前选择的option索引,或通过索引设置指定options集合中哪一项被选择。
select.selctedIndex = select.options.length-1; //将options集合中最后一项选中
var selectedItem = select.options(select.selectedIndex);//获取当前选中项
selectedItem.text; //选中项的文本
selectedItem.value; //选中项的值
< 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 >
代码下载