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

Javascript
JS 文件本身编码转换 图文教程
jQuery Ajax之$.get()方法和$.post()方法
jQuery Ajax之load()方法
JavaScript 核心参考教程 内置对象
JavaScript 核心参考教程 RegExp对象
javascript hashtable实现代码
百度留言本js 大家可以参考下
javascript 判断某年某月有多少天的实现代码 推荐
让iframe子窗体取父窗体地址栏参数(querystring)
jquery pagination插件实现无刷新分页代码
jQuery与javascript对照学习 获取父子前后元素 实现代码
通用javascript脚本函数库 方便开发
JQuery 绑定事件时传递参数的实现方法
支持IE,Firefox的javascript 日历控件
javascript 变速加数功能实现代码
extjs 学习笔记（一） 一些基础知识
extjs 学习笔记（二） Ext.Element类
Jquery 学习笔记（一）
一些技巧性实用js代码小结
jquery 常用操作整理 基础入门篇

No. « 260 261 262 263 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 120 ::
收藏到网摘: 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;