先来看看options集合的这几个方法：
options.add(option)方法向集合里添加一项option对象；
options.remove(index)方法移除options集合中的指定项；
options(index)或options.item(index)可以通过索引获取options集合的指定项；
javascript代码如下：
var
selectTag
=
null
;
//
select标记
var
OPTONLENGTH
=
10
;
//
每次填充option数
var
colls
=
[];
//
对select标记options的引用
window.onload
=
function
()
{
window.onload
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; //选中项的值
引自：
http://gubo85.bokee.com/viewdiary.16088621.html
<
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
>
