javascript操作Select标记中options集合

最新推荐文章于 2021-08-13 11:14:31 发布

ahpo

最新推荐文章于 2021-08-13 11:14:31 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： javascript function random button input null

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

导读：
先来看看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=0i

{

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-1i>=0i--)

{

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>

<hr/>

</div>

<hr/>

<h4>使用随机数初始化SelectBox</h4>

<input type="button" value="Init" οnclick="initSelectBox()"/> <input type="checkbox" name="chkClear"/>clear

<hr/>

<h4>添加option项</h4>

<hr/>

<h4>删除option项</h4>

        </BODY>
        本文转自
http://gubo85.bokee.com/viewdiary.16088621.html

ahpo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript操作Select标记中options集合

导读：先来看看options集合的这几个方法： options.add(option)方法向集合里添加一项option对象； options.remove(index)方法移除options集合中的指定项； options(index)或options.item(index)可以通过索引获取options集合的指定项； javascript代码如下： var selectTag
复制链接

扫一扫