JavaScript Select标记中options操作方法集合

Select options集合操作方法

本文介绍如何在JavaScript中操作Select标记的options集合。

首先了解options集合提供的主要方法：

使用options.add(option)方法可向集合中添加一个option对象；

通过options.remove(index)方法可以移除集合中指定索引的项；

利用options(index)或options.item(index)可根据索引获取集合中对应的指定项；

具体的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构造函数与selectedIndex属性

注意到上面创建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; //选中项的值

HTML界面与动态操作示例

<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;