您的位置：首页 > Web前端 > JavaScript

javascript操作Select标记中options集合

2008-12-29 18:24 585 查看

先来看看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的引用

//使用随机数填充select.options

//添加新option项前是否清空当前options

//清空options集合

//添加一项新option

//创建一个option对象

//删除options集合中指定的一项option

//获取当前选定的option索引

//获取options集合的总数

//获取当前选定的option文本

//获取当前选定的option值

//使用options集合中最后一项获取焦点

//显示当select标记状态

注意到上面创建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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航