先来看看options集合的这几个方法:
options.add(option)方法向集合里添加一项option对象;
options.remove(index)方法移除options集合中的指定项;
options(index)或options.item(index)可以通过索引获取options集合的指定项;
javascript代码如下:
1var 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
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
注意到上面创建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