转：js中select及option的相关操作 -

bear999

浏览: 74452 次
性别:
来自: 北京

最近访客更多访客>>

xiaoxiaoHer

AlphaPay

灬小怪兽

xiaoyin_elf

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

转：js中select及option的相关操作

JavaScript .net

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; 

详细出处参考：http://www.jb51.net/article/16240.htm

分享到：