select和option操作
http://www.jb51.net/article/16240.htm
javascript操作Select标记中options集合?
先来看看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(){?
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; //选中项的值?
<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>
检测是否有选中?
if(objSelect.selectedIndex > -1) {?
//说明选中?
} else {?
//说明没有选中?
}?
删除被选中的项?
objSelect.options[objSelect.selectedIndex] = null;?
增加项?
objSelect.options[objSelect.length] = new Option("你好","hello");?
修改所选择中的项?
objSelect.options[objSelect.selectedIndex] = new Option("你好","hello");?
得到所选择项的文本?
objSelect.options[objSelect.selectedIndex].text;?
得到所选择项的值?
objSelect.options[objSelect.selectedIndex].value;?
