使用JavaScript操作Select元素
创始人
2024-06-08 01:21:45
0

JavaScript操作Select元素说来也不是什么高深技术,不过在网页中还是很有用的。

今天试着用面向对象的思想用javascript写了一个SelectUtil“类”,完成网页中的select元素的各种操作,包括:添加、删除选中、全部删除、移动、调整顺序、全选。

代码本身没有什么好说的,估计很多人都会。只是写代码、调试代码的时候,发现两个有趣的现象:

1.FireFox可以直接把一个select元素的option对象插入另一个select元素,实际的效果是移动;而IE中同样的操作会出错;

2.同样的脚本,写在表单里与不写在表单里竟然有很大的差别,这个我以前没有注意到。

JavaScript操作Select元素,网页运行的效果:

网页运行的效果 

JavaScript操作Select元素的代码如下:

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. < html xmlns="http://www.w3.org/1999/xhtml"> 
  3. < head> 
  4. < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. < title>listbox控制测试< /title> 
  6. < script type="text/javascript"> 
  7.  function SelectUtil(idOrObj){  
  8.   if(typeof(idOrObj)=="string"){  
  9.    this.selectObj=document.getElementById(idOrObj);  
  10.   }  
  11.   else if (idOrObj!=null && typeof(idOrObj)=="object" && idOrObj.tagName=="SELECT"){  
  12.    this.selectObj=idOrObj;  
  13.   }  
  14.   else{  
  15.    alert("创建对象失败,参数不合法!");  
  16.   }  
  17.  }  
  18.  SelectUtil.prototype.isExist=function(itemValue){  
  19.   var isExist = false;  
  20.   for(var i=0; i< this.selectObj.options.length; i++){  
  21.    if(this.selectObj.options[i].value==itemValue){  
  22.     isExist=true;  
  23.     break;  
  24.    }  
  25.   }  
  26.   return isExist;  
  27.  }  
  28.  SelectUtil.prototype.addItem=function(itemText,itemValue){  
  29.   if(!itemText || !itemValue || typeof(itemText)!="string" ||typeof(itemValue)!="string" )return false;  
  30.   if(this.isExist(itemValue)){  
  31.    //alert("项目已存在!");  
  32.    return false;  
  33.   }  
  34.   var optionItem = new Option(itemText,itemValue);  
  35.   this.selectObj.options.add(optionItem);  
  36.   return true;  
  37.  }  
  38.  SelectUtil.prototype.delItem=function(itemValue){  
  39.   var bDel=false;  
  40.   for(var i=0; i< this.selectObj.options.length; i++){  
  41.    if(this.selectObj.options[i].value==itemValue){  
  42.     bDel=true;  
  43.     this.selectObj.options.remove(i);  
  44.     break;  
  45.    }  
  46.   }  
  47.   return bDel;  
  48.  }  
  49.  SelectUtil.prototype.delSelectedItem=function(){  
  50.   var length = this.selectObj.options.length-1;  
  51.   var num = 0;  
  52.   for(var i=length; i>=0; i--){  
  53.    if(this.selectObj.options[i].selected==true){  
  54.     this.selectObj.options[i] = null;  
  55.     num++;  
  56.    }  
  57.   }  
  58.   return num;  
  59.  }  
  60.  SelectUtil.prototype.cloneItem = function (itemValue){  
  61.   var result=null;  
  62.   for(var i=0; i< this.selectObj.options.length; i++){  
  63.    if(this.selectObj.options[i].value==itemValue){  
  64.     result=this.selectObj.options[i];  
  65.     break;  
  66.    }  
  67.   }  
  68.   if(result==null)return null;  
  69.   return new Option(result.text,result.value);  
  70.  }  
  71.  SelectUtil.prototype.getItem = function (itemValue){  
  72.   var result=null;  
  73.   for(var i=0; i< this.selectObj.options.length; i++){  
  74.    if(this.selectObj.options[i].value==itemValue){  
  75.     result=this.selectObj.options[i];  
  76.     break;  
  77.    }  
  78.   }  
  79.   return result;  
  80.  }  
  81.  SelectUtil.prototype.modItemText=function(itemText,itemValue){  
  82.   var opt=this.getItem(itemValue);  
  83.   if(opt==null){  
  84.    alert("没有找到指定的项目!");  
  85.    return false;  
  86.   }  
  87.   else{  
  88.    opt.text = itemText;  
  89.    return true;  
  90.   }  
  91.  }  
  92.  SelectUtil.prototype.selItemByValue=function(itemValue){  
  93.   var opt = this.getItem(itemValue);  
  94.   if(opt!=null){  
  95.    opt.selected=true;  
  96.    return true;  
  97.   }  
  98.   else{  
  99.    return false;  
  100.   }  
  101.  }  
  102.  SelectUtil.prototype.clear=function(){  
  103.   this.selectObj.options.length=0;  
  104.  }  
  105.  SelectUtil.prototype.selectedIndex=function(){  
  106.   return this.selectObj.selectedIndex;  
  107.  }  
  108.  SelectUtil.prototype.seletedText=function(){  
  109.   return this.selectObj.text;  
  110.  }  
  111.  SelectUtil.prototype.getSelectedItem=function(){  
  112.   var idx = this.selectObj.selectedIndex;  
  113.   if(idx==-1)return null;  
  114.   else{  
  115.    return this.selectObj.options[idx];  
  116.   }  
  117.  }  
  118.  SelectUtil.prototype.adjustItem=function(optionObj,direction){  
  119.   if(!optionObj){  
  120.    optionObj = this.getSelectedItem();  
  121.   }  
  122.   if(!optionObj)return false;  
  123.   var delta = (direction=="down")?1:-1;  
  124.   if(optionObj.index+delta< 0 || optionObj.index+delta>=this.selectObj.options.length)return true;  
  125.   else{  
  126.    var opt,tmp;  
  127.    opt = this.selectObj.options[optionObj.index+delta];  
  128.    tmp = opt.value;  
  129.    opt.value=optionObj.value;  
  130.    optionObj.value = tmp;  
  131.    tmp = opt.text;  
  132.    opt.text=optionObj.text;  
  133.    optionObj.text = tmp;  
  134.    opt.selected=true;  
  135.    optionObj.selected=false;  
  136.    return true;  
  137.   }  
  138.  }  
  139.  SelectUtil.prototype.getAllItem=function(){  
  140.   return this.selectObj.options;  
  141.  }  
  142.  SelectUtil.prototype.getItemCount=function(){  
  143.   return this.selectObj.options.length;  
  144.  }  
  145.  SelectUtil.prototype.moveSelectedItemTo=function(anotherSelectObj){  
  146.   if(!anotherSelectObj)return false;  
  147.   var length = this.selectObj.options.length-1;  
  148.   var num = 0,opt;  
  149.   for(var i=length; i>=0; i--){  
  150.    if(this.selectObj.options[i].selected==true){  
  151.     num++;  
  152.     opt = this.selectObj.options[i];  
  153.     //没有验证有无重复  
  154.     anotherSelectObj.options.add(new Option(opt.text,opt.value));  
  155.     this.selectObj.options[i] = null;  
  156.    }  
  157.   }  
  158.   return num;  
  159.  }  
  160.  SelectUtil.prototype.moveAllItemTo=function(anotherSelectObj,bCreate){  
  161.   if(!anotherSelectObj)return false;  
  162.   var length = this.selectObj.options.length-1;  
  163.   var num = 0,opt=null;  
  164.   for(var i=length; i>=0; i--){  
  165.    num++;  
  166.    opt = this.selectObj.options[i];  
  167.    //没有验证有无重复  
  168.    anotherSelectObj.options.add(new Option(opt.text,opt.value));  
  169.    this.selectObj.options[i] = null;  
  170.   }  
  171.   return num;  
  172.  }  
  173.  SelectUtil.prototype.getObject=function(){  
  174.   return this.selectObj;  
  175.  }  
  176.  SelectUtil.prototype.selectAll=function(){  
  177.   for(var i=0; i< this.selectObj.options.length; i++){  
  178.    this.selectObj.options[i].selected=true;  
  179.   }  
  180.  }  
  181. < /script> 
  182. < style type="text/css"> 
  183.  #srclb,#dstlb{  
  184.   border:1px solid #aaa;  
  185.   width:200px;  
  186.   height:400px;  
  187.  }  
  188.  .zhcxbtn{  
  189.   width:30px;  
  190.  }  
  191. < /style> 
  192. < /head> 
  193.  
  194. < body> 
  195. < div> 
  196. < table width="460" border="0" class="zhcx" cellpadding="0" cellspacing="0"> 
  197.  < tr> 
  198.      < td> 
  199.             < select multiple="multiple" name="srclb" id="srclb" ondblclick="srclb.moveSelectedItemTo(dstlb.getObject());"> 
  200.                 < option value="1">宝马1< /option> 
  201.                 < option value="2">宝马2< /option> 
  202.                 < option value="3">宝马3< /option> 
  203.                 < option value="4">宝马4< /option> 
  204.                 < option value="5">宝马5< /option> 
  205.                 < option value="6">宝马6< /option> 
  206.                 < option value="7">宝马7< /option> 
  207.             < /select> 
  208.         < /td> 
  209.      < td> 
  210.             < input type="button" class="zhcxbtn" value=">" onclick="srclb.moveSelectedItemTo(dstlb.getObject());"/> 
  211.             < input type="button" class="zhcxbtn" value=">>" onclick="srclb.moveAllItemTo(dstlb.getObject());"/> 
  212.             < input type="button" class="zhcxbtn" value="< " onclick="dstlb.moveSelectedItemTo(srclb.getObject());"/> 
  213.             < input type="button" class="zhcxbtn" value="< < " onclick="dstlb.moveAllItemTo(srclb.getObject());"/> 
  214.         < /td> 
  215.      < td> 
  216.             < select multiple="multiple" name="dstlb" id="dstlb" ondblclick="dstlb.adjustItem();"> 
  217.             < /select> 
  218.         < /td> 
  219.      < td> 
  220.             < input type="button" class="zhcxbtn" value="↑" onclick="dstlb.adjustItem();"/> 
  221.             < input type="button" class="zhcxbtn" value="↓" onclick="dstlb.adjustItem(null,'down');"/> 
  222.         < /td> 
  223.     < /tr> 
  224. < /table> 
  225. < /div> 
  226. < input type="button" value="全选" onclick="dstlb.selectAll();"/> 
  227. < script type="text/javascript"> 
  228.  var dstlb = new SelectUtil("dstlb");  
  229.  var srclb = new SelectUtil("srclb");  
  230. < /script> 
  231. < /body> 
  232. < /html> 
  233.  

【编辑推荐】

  1. 浅析利用Javascript获取随机颜色
  2. JSON是什么?为JavaScript准备的数据格式
  3. 十个最常用的JavaScript自定义函数
  4. 有关JavaScript事件加载的一些延伸思考
  5. JavaScript使用心得汇总:从BOM和DOM谈起

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...