javascript操作Select标记中options集合

最新推荐文章于 2024-03-13 12:15:11 发布

原创最新推荐文章于 2024-03-13 12:15:11 发布 · 635 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#javascript #function #random #button #input #null

html与js相关专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用JavaScript操作HTML中的Select元素，包括添加、删除选项，以及获取当前选中的选项等实用功能。

先来看看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>

评论

成就一亿技术人!

拼手气红包6.0元

还能输入1000个字符

添加红包

插入表情

表情包

代码片

HTML/XML
objective-c
Ruby
PHP
C
C++
JavaScript
Python
Java
CSS
SQL
其它

条评论被折叠查看

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。