`

javascript操作Select标记中options集合

 
阅读更多

先来看看options集合的这几个方法：
options.add(option)方法向集合里添加一项option对象；
options.remove(index)方法移除options集合中的指定项；
options(index)或options.item(index)可以通过索引获取options集合的指定项；

javascript代码如下：

varselectTag=null;//select标记
varOPTONLENGTH=10;//每次填充option数
varcolls=[];//对select标记options的引用

window.onload=function()...{
selectTag=document.getElementById("SelectBox");//获取select标记
colls=selectTag.options;//获取引用
//initSelectBox();//自初始化select.options
};

//使用随机数填充select.options
functioninitSelectBox()...{
varrandom=0;
varoptionItem=null;
varitem=null;

if(colls.length>0&&isClearOption())...{
clearOptions(colls);
}

for(vari=0;i<OPTONLENGTH;i++)...{

random=Math.floor(Math.random()*9000)+1000;
item=newOption(random,random);//通过Option()构造函数创建option对象
selectTag.options.add(item);//添加到options集合中
}

watchState();
}
//添加新option项前是否清空当前options
functionisClearOption()...{
returndocument.getElementById("chkClear").checked;
}
//清空options集合
functionclearOptions(colls)...{
varlength=colls.length;
for(vari=length-1;i>=0;i--)...{
colls.remove(i);
}
}
//添加一项新option
functionaddOption()...{
colls.add(createOption());
lastOptionOnFocus(colls.length-1);
watchState();
}
//创建一个option对象
functioncreateOption()...{
varrandom=Math.floor(Math.random()*9000)+1000;
returnnewOption(random,random);
}
//删除options集合中指定的一项option
functionremoveOption(index)...{
if(index>=0)...{
colls.remove(index);
lastOptionOnFocus(colls.length-1);
}
watchState();
}
//获取当前选定的option索引
functiongetSelectedIndex()...{
returnselectTag.selectedIndex;
}
//获取options集合的总数
functiongetOptionLength()...{
returncolls.length;
}
//获取当前选定的option文本
functiongetCurrentOptionValue(index)...{
if(index>=0)
returncolls(index).value;
}
//获取当前选定的option值
functiongetCurrentOptionText(index)...{
if(index>=0)
returncolls(index).text;
}
//使用options集合中最后一项获取焦点
functionlastOptionOnFocus(index)...{
selectTag.selectedIndex=index;
}
//显示当select标记状态
functionwatchState()...{
vardivWatch=document.getElementById("divWatch");
varinnerHtml="";
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; //选中项的值引自：http://gubo85.bokee.com/viewdiary.16088621.html

<BODY>
<Selectname="SelectBox">
</Select>
<hr/>
<divid="divWatch"style="background-color:beige;width=220;">
</div>
<hr/>
<h4>使用随机数初始化SelectBox</h4>
<inputtype="button"value="Init"onclick="initSelectBox()"/><inputtype="checkbox"name="chkClear"/>clear
<hr/>
<h4>添加option项</h4>
<inputtype="button"value="create"onclick="addOption()"/>
<hr/>
<h4>删除option项</h4>
<inputtype="button"value="delete"onclick="removeOption(colls.length-1)"/>
</BODY>

分享到：
| 考察ASP.NET 2.0中的Membership, Roles, a ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics