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


Posted in Javascript onOctober 22, 2008

javascript操作Select标记中options集合
先来看看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>
检测是否有选中
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;

Javascript 相关文章推荐
Jquery常用技巧收集整理篇
Nov 14 Javascript
怎么清空javascript数组
May 11 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
JavaScript Undefined,Null类型和NaN值区别
Oct 22 #Javascript
javascript TextArea动态显示剩余字符
Oct 22 #Javascript
Javascript this关键字使用分析
Oct 21 #Javascript
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 #Javascript
JavaScript confirm选择判断
Oct 18 #Javascript
javascript脚本编程解决考试分数统计问题
Oct 18 #Javascript
提高网站信任度的技巧
Oct 17 #Javascript
You might like
php中jpgraph类库的使用介绍
2013/08/08 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
Js apply方法详解
2017/02/16 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
Python实现两款计算器功能示例
2017/12/19 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
商务日语专业毕业生求职信
2013/10/26 职场文书
《自然之道》教学反思
2014/02/11 职场文书
群众路线党课主持词
2014/04/01 职场文书
论文评语大全
2014/04/29 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python