论坛首页 → Web前端技术论坛 →

实用的JS工具类（二）——Select操作类

浏览 5359 次
锁定老帖子 主题：实用的JS工具类（二）——Select操作类
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • ferreousbox
  • 等级: 一星会员
  • 性别:
  • 文章: 77
  • 积分: 150
  • 来自: 杭州
   发表时间：2007-11-14  

    再来第二个使用类，select元素的操作使用类。针对网页中select元素的操作实用类（静态方法）

js 代码
  1. /**-----------------------------------------------------------------------  
  2. * ------------------------针对select操作的实用Select类-------------------  
  3. * -----------------------------------------------------------------------  
  4. */  
  5. function Select(){};   
  6. /**  
  7. * 根据指定的JSON对象来生成指定的select的options项（清除原来的options）.  
  8. */  
  9. Select.create = function(/*string*/selectId,/*json object*/json) {   
  10.     Select.clear(selectId);   
  11.     Select.add(selectId, json);   
  12. };   
  13. /**  
  14. * 该方法同create,只不过是在原来的基础上进行追加  
  15. */  
  16. Select.add = function(/*string*/selectId,/*json object*/json) {   
  17.     try {   
  18.         if (!json.options) return;   
  19.         for (var i = 0; i < json.options.length; i ++) {   
  20.             Select.addOption(selectId,json.options[i].value,json.options[i].text);   
  21.         }   
  22.     } catch (ex) {   
  23.         alert('设置select错误：指定的JSON对象不符合Select对象的解析要求！');   
  24.     }   
  25. };   
  26. /**  
  27. * 创建一个options并返回  
  28. */  
  29. Select.createOption = function(/*string*/value, /*string*/text) {   
  30.     var opt = document.createElement('option');   
  31.     opt.setAttribute('value', value);   
  32.     opt.innerHTML = text;   
  33.     return opt;   
  34. };   
  35. /**  
  36. * 给指定的select添加一个option,并返回当前option对象  
  37. */  
  38. Select.addOption = function(/*string*/selectId, /*string*/value, /*string*/text) {   
  39.     var opt = Select.createOption(value, text);   
  40.     $(selectId).appendChild(opt);   
  41.     return opt;   
  42. };   
  43. /**  
  44. * 获取指定select的当前被选中的options对象，如果为多选且有多个被选中则返回数组.  
  45. */  
  46. Select.getSelected = function(/*string*/selectId) {   
  47.     var slt = $(selectId);   
  48.     if (!slt) return null;   
  49.     if (slt.type.toLowerCase() == "select-multiple") {   
  50.         var len = Select.len(selectId);   
  51.         var result = [];   
  52.         for (var i = 0; i < len; i ++) {   
  53.             if (slt.options[i].selected) result.push(slt.options[i]);   
  54.         }   
  55.         return result.length > 1 ? result : (result.length == 0 ? null : result[0]);   
  56.     } else {   
  57.         var index = $(selectId).selectedIndex;   
  58.         return $(selectId).options[index];   
  59.     }   
  60. };   
  61. /**  
  62. * 使指定索引位置的option被选中.从0开始.  
  63. */  
  64. Select.select = function(/*string*/selectId, /*int*/index) {   
  65.     var slt = $(selectId);   
  66.     if (!slt) return false;   
  67.     for (var i = 0; i < slt.options.length; i ++) {   
  68.         if (index == i) {   
  69.             slt.options[i].setAttribute("selected", "selected");   
  70.             return true;   
  71.         }   
  72.     }   
  73.     return false;   
  74. };   
  75. /**  
  76. * 选中指定的select的所有option选项，如果支持多选的话  
  77. */  
  78. Select.selectAll = function(/*string*/selectId) {   
  79.     var len = Select.len(selectId);   
  80.     for (var i = 0; i < len; i ++) Select.select(selectId, i);   
  81. };   
  82. /**  
  83. * 获取指定select的总的options个数  
  84. */  
  85. Select.len = function(/*string*/selectId) {   
  86.     return $(selectId).options.length;   
  87. };   
  88. /**  
  89. * 清除select中满足条件的options，如果没有指定处理方法则清除所有options项  
  90. */  
  91. Select.clear = function(/*string*/selectId, /*function*/iterator) {   
  92.     if (typeof(iterator) != 'function') {   
  93.         $(selectId).length = 0;   
  94.     } else {   
  95.         var slt = $(selectId);   
  96.         for (var i = slt.options.length - 1; i >= 0; i --) {   
  97.             if (iterator(slt.options[i]) == true) slt.removeChild(slt.options[i]);   
  98.         }   
  99.     }   
  100. };   
  101. /**  
  102. * 复制指定的select的option对象到另外一指定的select对象上.如果指定了处理  
  103. * 函数，那么只有返回true时才会copy.  
  104. * 函数iterator参数：当前处理的option对象、目标select的options数组  
  105. */  
  106. Select.copy = function(/*string*/srcSlt, /*string*/targetSlt, /*function*/iterator) {   
  107.     var s = $(srcSlt), t = $(targetSlt);   
  108.     for (var i = 0; i < s.options.length; i ++) {   
  109.         if (typeof(iterator) == 'function') {   
  110.             if (iterator(s.options[i], $(targetSlt).options) == true) {   
  111.                 t.appendChild(s.options[i].cloneNode(true));   
  112.             }   
  113.         } else {   
  114.             t.appendChild(s.options[i].cloneNode(true));   
  115.         }   
  116.     }   
  117. };   
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics