当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript Select标记中options操作方法集合

Javascript
javascript 动态数据下的锚点错位问题解决方法
jQuery 动画基础教程
jQuery 操作XML入门
ASP SQL防注入的方法
jquery 插件 web2.0分格的分页脚本，可用于ajax无刷新分页
jquery 插件 任意位置浮动固定层
JavaScript 检测浏览器和操作系统的脚本
不要小看注释掉的JS 引起的安全问题
js实现的验证，学习用js控制td
javascript iframe中打开文件,并检测iframe存在否
Javascript typeof 用法
Javascript valueOf 使用方法
extjs form textfield的隐藏方法
extjs grid取到数据而不显示的解决
Ext第一周 史上最强学习笔记---GridPanel（基础篇）
My Desktop :) 桌面式代码
javascript 双击文本框编辑功能代码
不用写JS也能使用EXTJS视频演示
js 提取class相同的节点集合
js Li来实现的效果

No. « 122 123 124 125 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 121 ::
收藏到网摘: n/a

收集的比较全的关于用js操作select中的options方法 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;