实用的JS工具类——Select操作类
2010-12-24 14:09
225 查看
实用的JS工具类(二)——Select操作类
关键字: ajax select js再来第二个使用类,select元素的操作使用类。针对网页中select元素的操作实用类(静态方法)
js 代码
/**-----------------------------------------------------------------------
* ------------------------针对select操作的实用Select类-------------------
* -----------------------------------------------------------------------
*/
function Select(){};
/**
* 根据指定的JSON对象来生成指定的select的options项(清除原来的options).
*/
Select.create = function(/*string*/selectId,/*json object*/json) {
Select.clear(selectId);
Select.add(selectId, json);
};
/**
* 该方法同create,只不过是在原来的基础上进行追加
*/
Select.add = function(/*string*/selectId,/*json object*/json) {
try {
if (!json.options) return;
for (var i = 0; i < json.options.length; i ++) {
Select.addOption(selectId,json.options[i].value,json.options[i].text);
}
} catch (ex) {
alert('设置select错误:指定的JSON对象不符合Select对象的解析要求!');
}
};
/**
* 创建一个options并返回
*/
Select.createOption = function(/*string*/value, /*string*/text) {
var opt = document.createElement('option');
opt.setAttribute('value', value);
opt.innerHTML = text;
return opt;
};
/**
* 给指定的select添加一个option,并返回当前option对象
*/
Select.addOption = function(/*string*/selectId, /*string*/value, /*string*/text) {
var opt = Select.createOption(value, text);
$(selectId).appendChild(opt);
return opt;
};
/**
* 获取指定select的当前被选中的options对象,如果为多选且有多个被选中则返回数组.
*/
Select.getSelected = function(/*string*/selectId) {
var slt = $(selectId);
if (!slt) return null;
if (slt.type.toLowerCase() == "select-multiple") {
var len = Select.len(selectId);
var result = [];
for (var i = 0; i < len; i ++) {
if (slt.options[i].selected) result.push(slt.options[i]);
}
return result.length > 1 ? result : (result.length == 0 ? null : result[0]);
} else {
var index = $(selectId).selectedIndex;
return $(selectId).options[index];
}
};
/**
* 使指定索引位置的option被选中.从0开始.
*/
Select.select = function(/*string*/selectId, /*int*/index) {
var slt = $(selectId);
if (!slt) return false;
for (var i = 0; i < slt.options.length; i ++) {
if (index == i) {
slt.options[i].setAttribute("selected", "selected");
return true;
}
}
return false;
};
/**
* 选中指定的select的所有option选项,如果支持多选的话
*/
Select.selectAll = function(/*string*/selectId) {
var len = Select.len(selectId);
for (var i = 0; i < len; i ++) Select.select(selectId, i);
};
/**
* 获取指定select的总的options个数
*/
Select.len = function(/*string*/selectId) {
return $(selectId).options.length;
};
/**
* 清除select中满足条件的options,如果没有指定处理方法则清除所有options项
*/
Select.clear = function(/*string*/selectId, /*function*/iterator) {
if (typeof(iterator) != 'function') {
$(selectId).length = 0;
} else {
var slt = $(selectId);
for (var i = slt.options.length - 1; i >= 0; i --) {
if (iterator(slt.options[i]) == true) slt.removeChild(slt.options[i]);
}
}
};
/**
* 复制指定的select的option对象到另外一指定的select对象上.如果指定了处理
* 函数,那么只有返回true时才会copy.
* 函数iterator参数:当前处理的option对象、目标select的options数组
*/
Select.copy = function(/*string*/srcSlt, /*string*/targetSlt, /*function*/iterator) {
var s = $(srcSlt), t = $(targetSlt);
for (var i = 0; i < s.options.length; i ++) {
if (typeof(iterator) == 'function') {
if (iterator(s.options[i], $(targetSlt).options) == true) {
t.appendChild(s.options[i].cloneNode(true));
}
} else {
t.appendChild(s.options[i].cloneNode(true));
}
}
};
相关文章推荐
- 实用的JS工具类(二)——Select操作类
- JS工具类——Select操作类
- 整理发布html的select控件实用js操作
- 整理发布html的select控件实用js操作
- 整理发布html的select控件实用js操作
- html的select控件实用js操作
- 整理发布html的select控件实用js操作
- 左右两个Select列表框交换数据的JS代码,上下左右都可以移动数据,还可以置顶、沉底,相信大家见到过,但觉得挺实用,与大家分享。
- 简单实用js——可输入可选择可模糊查询的select下拉
- 一段比较实用的JS导航条显隐例子 .
- (转)一段操作Select的JS代码
- JS 实用函数 insertAfter和addLoadEvent 记录
- JS获取下拉列表选中项的值和文本(select)以及获取单选按钮(radio)组的值和修改选中项
- 使用linq.js操作后台JSON数据到前台select标签
- 实用的内存块操作类(vb源码)
- JS插件网站 JS地图缩放等 比较实用 http://www.netzgesta.de
- js添加select下默认的option的value和text的方法
- Node.js中的Mongoose实用笔记
- 实用js小汇总--获取服务器控件ID
- JS 工具类读取cookie 用户名验证邮箱验证手机号码验证trim字符