再来第二个使用类,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));
- }
- }
- };