先来看看options集合的这几个方法：
options.add(option)方法向集合里添加一项option对象；
options.remove(index)方法移除options集合中的指定项；
options(index)或options.item(index)可以通过索引获取options集合的指定项；
javascript代码如下：
1
var selectTag = null; //select标记
2 var OPTONLENGTH = 10; //每次填充option数
3 var colls = []; //对select标记options的引用
4
5
window.onload = function(){
6
selectTag = document.getElementById("SelectBox"); //获取select标记
7 colls = selectTag.options; //获取引用
8 //initSelectBox(); //自初始化select.options
9
};
10
11 //使用随机数填充select.options
12 function initSelectBox(){
13 var random = 0 ;
14 var optionItem = null;
15 var item = null;
16
17
if(colls.length > 0 && isClearOption()){
18 clearOptions(colls);
19
}
20
21 for(var i=0;i<OPTONLENGTH;i++){
22
23 random = Math.floor(Math.random()*9000)+1000;
24 item = new Option(random,random); //通过Option()构造函数创建option对象
25 selectTag.options.add(item); //添加到options集合中
26 }
27
28 watchState();
29 }
30 //添加新option项前是否清空当前options
31 function isClearOption(){
32 return document.getElementById("chkClear").checked;
33 }
34 //清空options集合
35 function clearOptions(colls){
36 var length = colls.length;
37 for(var i=length-1;i>=0;i--){
38 colls.remove(i);
39 }
40 }
41 //添加一项新option
42 function addOption(){
43 colls.add(createOption());
44 lastOptionOnFocus(colls.length-1);
45 watchState();
46 }
47 //创建一个option对象
48 function createOption(){
49 var random = Math.floor(Math.random()*9000)+1000;
50 return new Option(random,random);
51 }
52 //删除options集合中指定的一项option
53 function removeOption(index){
54 if(index >= 0){
55 colls.remove(index);
56 lastOptionOnFocus(colls.length-1);
57 }
58 watchState();
59 }
60 //获取当前选定的option索引
61 function getSelectedIndex(){
62 return selectTag.selectedIndex;
63 }
64 //获取options集合的总数
65 function getOptionLength(){
66 return colls.length;
67 }
68 //获取当前选定的option文本
69 function getCurrentOptionValue(index){
70 if(index >= 0)
71 return colls(index).value;
72 }
73 //获取当前选定的option值
74 function getCurrentOptionText(index){
75 if(index >= 0)
76 return colls(index).text;
77 }
78 //使用options集合中最后一项获取焦点
79 function lastOptionOnFocus(index){
80 selectTag.selectedIndex = index;
81 }
82 //显示当select标记状态
83 function watchState(){
84 var divWatch = document.getElementById("divWatch");
85 var innerHtml="";
86 innerHtml = "option总数:" + getOptionLength();
87 innerHtml += "<br/>当前项索引:" + getSelectedIndex();
88 innerHtml += "<br/>当前项文本:" + getCurrentOptionText(getSelectedIndex());
89 innerHtml += "<br/>当前项值:" + getCurrentOptionValue(getSelectedIndex());
90 divWatch.innerHTML = innerHtml;
91 divWatch.align = "justify";
92 }
93
var selectTag = null; //select标记2
var OPTONLENGTH = 10; //每次填充option数3
var colls = []; //对select标记options的引用4
5
window.onload = function(){
6
selectTag = document.getElementById("SelectBox"); //获取select标记 7
colls = selectTag.options; //获取引用8
//initSelectBox(); //自初始化select.options9
};10
11
//使用随机数填充select.options12
function initSelectBox(){13
var random = 0 ;14
var optionItem = null;15
var item = null;16
17
if(colls.length > 0 && isClearOption()){
18
clearOptions(colls);19
}20
21
for(var i=0;i<OPTONLENGTH;i++){22
23
random = Math.floor(Math.random()*9000)+1000;24
item = new Option(random,random); //通过Option()构造函数创建option对象 25
selectTag.options.add(item); //添加到options集合中26
} 27
28
watchState();29
}30
//添加新option项前是否清空当前options31
function isClearOption(){32
return document.getElementById("chkClear").checked;33
}34
//清空options集合35
function clearOptions(colls){36
var length = colls.length;37
for(var i=length-1;i>=0;i--){38
colls.remove(i);39
}40
}41
//添加一项新option42
function addOption(){43
colls.add(createOption());44
lastOptionOnFocus(colls.length-1);45
watchState();46
}47
//创建一个option对象48
function createOption(){49
var random = Math.floor(Math.random()*9000)+1000;50
return new Option(random,random);51
}52
//删除options集合中指定的一项option53
function removeOption(index){ 54
if(index >= 0){55
colls.remove(index);56
lastOptionOnFocus(colls.length-1);57
}58
watchState();59
}60
//获取当前选定的option索引61
function getSelectedIndex(){62
return selectTag.selectedIndex;63
}64
//获取options集合的总数65
function getOptionLength(){66
return colls.length;67
}68
//获取当前选定的option文本69
function getCurrentOptionValue(index){70
if(index >= 0)71
return colls(index).value;72
}73
//获取当前选定的option值74
function getCurrentOptionText(index){75
if(index >= 0)76
return colls(index).text;77
}78
//使用options集合中最后一项获取焦点79
function lastOptionOnFocus(index){80
selectTag.selectedIndex = index;81
}82
//显示当select标记状态83
function watchState(){84
var divWatch = document.getElementById("divWatch");85
var innerHtml="";86
innerHtml = "option总数:" + getOptionLength();87
innerHtml += "<br/>当前项索引:" + getSelectedIndex();88
innerHtml += "<br/>当前项文本:" + getCurrentOptionText(getSelectedIndex());89
innerHtml += "<br/>当前项值:" + getCurrentOptionValue(getSelectedIndex());90
divWatch.innerHTML = innerHtml;91
divWatch.align = "justify";92
}93
注意到上面创建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; //选中项的值
Code
浙公网安备 33010602011771号