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 相关文章推荐
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
javascript中indexOf技术详解
May 07 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
js实现自动播放匀速轮播图
Feb 06 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中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python中的yield使用方法
2014/02/11 Python
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python 修改列表中的元素方法
2018/06/26 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
PHP开发的一般流程
2013/08/13 面试题
《母亲的恩情》教学反思
2014/02/13 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
生物技术专业求职信
2014/06/10 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
python 学习GCN图卷积神经网络
2022/05/11 Python