JavaScript操作Select元素說來也不是什么高深技術(shù)，不過在網(wǎng)頁(yè)中還是很有用的。

今天試著用面向?qū)ο蟮乃枷胗胘avascript寫了一個(gè)SelectUtil“類”，完成網(wǎng)頁(yè)中的select元素的各種操作，包括：添加、刪除選中、全部刪除、移動(dòng)、調(diào)整順序、全選。

代碼本身沒有什么好說的，估計(jì)很多人都會(huì)。只是寫代碼、調(diào)試代碼的時(shí)候，發(fā)現(xiàn)兩個(gè)有趣的現(xiàn)象：

1.FireFox可以直接把一個(gè)select元素的option對(duì)象插入另一個(gè)select元素，實(shí)際的效果是移動(dòng)；而IE中同樣的操作會(huì)出錯(cuò)；

2.同樣的腳本，寫在表單里與不寫在表單里竟然有很大的差別，這個(gè)我以前沒有注意到。

JavaScript操作Select元素，網(wǎng)頁(yè)運(yùn)行的效果：

JavaScript操作Select元素的代碼如下：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
< html xmlns="http://www.w3.org/1999/xhtml"> 
< head> 
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
< title>listbox控制測(cè)試< /title> 
< script type="text/javascript"> 
 function SelectUtil(idOrObj){  
  if(typeof(idOrObj)=="string"){  
   this.selectObj=document.getElementById(idOrObj);  
  }  
  else if (idOrObj!=null && typeof(idOrObj)=="object" && idOrObj.tagName=="SELECT"){  
   this.selectObj=idOrObj;  
  }  
  else{  
   alert("創(chuàng)建對(duì)象失敗，參數(shù)不合法！");  
  }  
 }  
 SelectUtil.prototype.isExist=function(itemValue){  
  var isExist = false;  
  for(var i=0; i< this.selectObj.options.length; i++){  
   if(this.selectObj.options[i].value==itemValue){  
    isExist=true;  
    break;  
   }  
  }  
  return isExist;  
 }  
 SelectUtil.prototype.addItem=function(itemText,itemValue){  
  if(!itemText || !itemValue || typeof(itemText)!="string" ||typeof(itemValue)!="string" )return false;  
  if(this.isExist(itemValue)){  
   //alert("項(xiàng)目已存在！");  
   return false;  
  }  
  var optionItem = new Option(itemText,itemValue);  
  this.selectObj.options.add(optionItem);  
  return true;  
 }  
 SelectUtil.prototype.delItem=function(itemValue){  
  var bDel=false;  
  for(var i=0; i< this.selectObj.options.length; i++){  
   if(this.selectObj.options[i].value==itemValue){  
    bDel=true;  
    this.selectObj.options.remove(i);  
    break;  
   }  
  }  
  return bDel;  
 }  
 SelectUtil.prototype.delSelectedItem=function(){  
  var length = this.selectObj.options.length-1;  
  var num = 0;  
  for(var i=length; i>=0; i--){  
   if(this.selectObj.options[i].selected==true){  
    this.selectObj.options[i] = null;  
    num++;  
   }  
  }  
  return num;  
 }  
 SelectUtil.prototype.cloneItem = function (itemValue){  
  var result=null;  
  for(var i=0; i< this.selectObj.options.length; i++){  
   if(this.selectObj.options[i].value==itemValue){  
    result=this.selectObj.options[i];  
    break;  
   }  
  }  
  if(result==null)return null;  
  return new Option(result.text,result.value);  
 }  
 SelectUtil.prototype.getItem = function (itemValue){  
  var result=null;  
  for(var i=0; i< this.selectObj.options.length; i++){  
   if(this.selectObj.options[i].value==itemValue){  
    result=this.selectObj.options[i];  
    break;  
   }  
  }  
  return result;  
 }  
 SelectUtil.prototype.modItemText=function(itemText,itemValue){  
  var opt=this.getItem(itemValue);  
  if(opt==null){  
   alert("沒有找到指定的項(xiàng)目！");  
   return false;  
  }  
  else{  
   opt.text = itemText;  
   return true;  
  }  
 }  
 SelectUtil.prototype.selItemByValue=function(itemValue){  
  var opt = this.getItem(itemValue);  
  if(opt!=null){  
   opt.selected=true;  
   return true;  
  }  
  else{  
   return false;  
  }  
 }  
 SelectUtil.prototype.clear=function(){  
  this.selectObj.options.length=0;  
 }  
 SelectUtil.prototype.selectedIndex=function(){  
  return this.selectObj.selectedIndex;  
 }  
 SelectUtil.prototype.seletedText=function(){  
  return this.selectObj.text;  
 }  
 SelectUtil.prototype.getSelectedItem=function(){  
  var idx = this.selectObj.selectedIndex;  
  if(idx==-1)return null;  
  else{  
   return this.selectObj.options[idx];  
  }  
 }  
 SelectUtil.prototype.adjustItem=function(optionObj,direction){  
  if(!optionObj){  
   optionObj = this.getSelectedItem();  
  }  
  if(!optionObj)return false;  
  var delta = (direction=="down")?1:-1;  
  if(optionObj.index+delta< 0 || optionObj.index+delta>=this.selectObj.options.length)return true;  
  else{  
   var opt,tmp;  
   opt = this.selectObj.options[optionObj.index+delta];  
   tmp = opt.value;  
   opt.value=optionObj.value;  
   optionObj.value = tmp;  
   tmp = opt.text;  
   opt.text=optionObj.text;  
   optionObj.text = tmp;  
   opt.selected=true;  
   optionObj.selected=false;  
   return true;  
  }  
 }  
 SelectUtil.prototype.getAllItem=function(){  
  return this.selectObj.options;  
 }  
 SelectUtil.prototype.getItemCount=function(){  
  return this.selectObj.options.length;  
 }  
 SelectUtil.prototype.moveSelectedItemTo=function(anotherSelectObj){  
  if(!anotherSelectObj)return false;  
  var length = this.selectObj.options.length-1;  
  var num = 0,opt;  
  for(var i=length; i>=0; i--){  
   if(this.selectObj.options[i].selected==true){  
    num++;  
    opt = this.selectObj.options[i];  
    //沒有驗(yàn)證有無重復(fù)  
    anotherSelectObj.options.add(new Option(opt.text,opt.value));  
    this.selectObj.options[i] = null;  
   }  
  }  
  return num;  
 }  
 SelectUtil.prototype.moveAllItemTo=function(anotherSelectObj,bCreate){  
  if(!anotherSelectObj)return false;  
  var length = this.selectObj.options.length-1;  
  var num = 0,opt=null;  
  for(var i=length; i>=0; i--){  
   num++;  
   opt = this.selectObj.options[i];  
   //沒有驗(yàn)證有無重復(fù)  
   anotherSelectObj.options.add(new Option(opt.text,opt.value));  
   this.selectObj.options[i] = null;  
  }  
  return num;  
 }  
 SelectUtil.prototype.getObject=function(){  
  return this.selectObj;  
 }  
 SelectUtil.prototype.selectAll=function(){  
  for(var i=0; i< this.selectObj.options.length; i++){  
   this.selectObj.options[i].selected=true;  
  }  
 }  
< /script> 
< style type="text/css"> 
 #srclb,#dstlb{  
  border:1px solid #aaa;  
  width:200px;  
  height:400px;  
 }  
 .zhcxbtn{  
  width:30px;  
 }  
< /style> 
< /head> 
 
< body> 
< div> 
< table width="460" border="0" class="zhcx" cellpadding="0" cellspacing="0"> 
 < tr> 
     < td> 
            < select multiple="multiple" name="srclb" id="srclb" ondblclick="srclb.moveSelectedItemTo(dstlb.getObject());"> 
                < option value="1">寶馬1< /option> 
                < option value="2">寶馬2< /option> 
                < option value="3">寶馬3< /option> 
                < option value="4">寶馬4< /option> 
                < option value="5">寶馬5< /option> 
                < option value="6">寶馬6< /option> 
                < option value="7">寶馬7< /option> 
            < /select> 
        < /td> 
     < td> 
            < input type="button" class="zhcxbtn" value=">" onclick="srclb.moveSelectedItemTo(dstlb.getObject());"/> 
            < input type="button" class="zhcxbtn" value=">>" onclick="srclb.moveAllItemTo(dstlb.getObject());"/> 
            < input type="button" class="zhcxbtn" value="< " onclick="dstlb.moveSelectedItemTo(srclb.getObject());"/> 
            < input type="button" class="zhcxbtn" value="< < " onclick="dstlb.moveAllItemTo(srclb.getObject());"/> 
        < /td> 
     < td> 
            < select multiple="multiple" name="dstlb" id="dstlb" ondblclick="dstlb.adjustItem();"> 
            < /select> 
        < /td> 
     < td> 
            < input type="button" class="zhcxbtn" value="↑" onclick="dstlb.adjustItem();"/> 
            < input type="button" class="zhcxbtn" value="↓" onclick="dstlb.adjustItem(null,'down');"/> 
        < /td> 
    < /tr> 
< /table> 
< /div> 
< input type="button" value="全選" onclick="dstlb.selectAll();"/> 
< script type="text/javascript"> 
 var dstlb = new SelectUtil("dstlb");  
 var srclb = new SelectUtil("srclb");  
< /script> 
< /body> 
< /html> 
 

【編輯推薦】

1. 淺析利用Javascript獲取隨機(jī)顏色
2. JSON是什么？為JavaScript準(zhǔn)備的數(shù)據(jù)格式
3. 十個(gè)最常用的JavaScript自定義函數(shù)
4. 有關(guān)JavaScript事件加載的一些延伸思考
5. JavaScript使用心得匯總：從BOM和DOM談起