先來看看options集合的這幾個方法：
options.add(option)方法向集合里添加一項option對象；
options.remove(index)方法移除options集合中的指定項；
options(index)或options.item(index)可以通過索引獲取options集合的指定項；
javascript代碼如下：
var
selectTag
=
null
;
//
select標記
var
OPTONLENGTH
=
10
;
//
每次填充option數(shù)
var
colls
=
[];
//
對select標記options的引用
window.onload
=
function
()
{
window.onload
selectTag
=
document.getElementById(
"
SelectBox
"
);
//
獲取select標記
colls
=
selectTag.options;
//
獲取引用
//
initSelectBox();//自初始化select.options
}
;
//
使用隨機數(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);
//
通過Option()構(gòu)造函數(shù)創(chuàng)建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();
}
//
創(chuàng)建一個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集合的總數(shù)
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標記狀態(tài)
function
watchState()
{
var
divWatch
=
document.getElementById(
"
divWatch
"
);
var
innerHtml
=
""
;
innerHtml
=
"
option總數(shù):
"
+
getOptionLength();
innerHtml
+=
"
<br/>當前項索引:
"
+
getSelectedIndex();
innerHtml
+=
"
<br/>當前項文本:
"
+
getCurrentOptionText(getSelectedIndex());
innerHtml
+=
"
<br/>當前項值:
"
+
getCurrentOptionValue(getSelectedIndex());
divWatch.innerHTML
=
innerHtml;
divWatch.align
=
"
justify
"
;
}
注意到上面創(chuàng)建option項時，使用了Option()構(gòu)造函數(shù)，這個構(gòu)造函數(shù)有兩個版本的重載。
1、var option = new Option(text,value); //這里要大寫Option()
2、var option = new Option();
option.text = text;
option.value=value;
我個人比較喜歡第一種方法來創(chuàng)建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
>
使用隨機數(shù)初始化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
>
更多文章、技術交流、商務合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
