javascript列表框左右移动，兼容IE,FF。留着有用

<html>
<head>
  <title>javascript 列表框左右移动</title>
  <style type="text/css">
   select{100px;height:100px;}
  </style>
  <script type="text/javascript">
   function roveRight(){
    var lBox = document.getElementById("leftBox");
    var rBox = document.getElementById("rightBox");
    var count = 0;

    for(i=0;i<lBox.length;i++){
     if(lBox[i].selected){
      //添加一个option:new Option(text,value)
      rBox.options.add(new Option(lBox[i].text,lBox.value));
      count++;
     }
    }
    //循环用于同时删除多个option
    for(i=0;i<count;i++){
     lBox.remove(lBox.selectedIndex);
    }
   }
   function roveleft(){
    var lBox = document.getElementById("leftBox");
    var rBox = document.getElementById("rightBox");
    var count = 0;

    for(i=0;i<rBox.length;i++){
     if(rBox[i].selected){
      lBox.options.add(new Option(rBox[i].text,rBox.vale));
      count++;
     }
    }
    for(i=0;i<count;i++){
     rBox.remove(rBox.selectedIndex);
    }
   }

  </script>
</head>
<body>
  <select id="leftBox" multiple="multiple">
   <option value="北京"> 北京 </option>
   <option value="上海"> 上海 </option>
   <option value="广州"> 广州 </option>
   <option value="深圳"> 深圳 </option>
  </select>
  <input type="button" id="addBtn" onclick="roveRight();" value=">>>" />
  <input type="button" id="addBtn" onclick="roveleft();" value="<<<" />
  <select id="rightBox" multiple="multiple">
   <option value="成都"> 成都 </option>
   <option value="深圳"> 深圳 </option>
   <option value="南京"> 南京 </option>
   <option value="天津"> 天津 </option>
  </select>
</body>
</html>

之前写的一个比较麻烦的函数：

//   function addItem(){
//    var dSource = document.getElementById("leftBox");
//    var dResult = document.getElementById("rightBox");
//    var selIndex = dSource.selectedIndex;
//
//    //添加一个option:new Option(text,value)
//    dResult.options[dResult.options.length]=new Option(dSource.value,dSource.value);
//    if(document.all){
//     dSource.options[selIndex].removeNode(true);
//    }
//    else{
//     dSource.removeChild(dSource.childNodes[selIndex]);
//    }
//   }

由于Firefox不支持removeNode，需要判断浏览器再分别使用不同的,Firefox要用removeChild()

/* 最近使用OO方式改进后的 */

<html>
<head>
<title>javascript 列表框左右移动类</title>
<style type="text/css">
select{100px;height:100px;}
</style>
</head>
<body>
<select id="leftBox" multiple="multiple">
<option value="北京"> 北京 </option>
<option value="上海"> 上海 </option>
<option value="广州"> 广州 </option>
<option value="深圳"> 深圳 </option>
</select>
<input type="button" id="goRight" value=">>>" />
<input type="button" id="goLeft" value="<<<" />
<select id="rightBox" multiple="multiple">
<option value="成都"> 成都 </option>
<option value="深圳"> 深圳 </option>
<option value="南京"> 南京 </option>
<option value="天津"> 天津 </option>
</select>
<script type="text/javascript">
//构造函数
function moveSelect(selector){
this.s1 = selector.select1;
this.s2 = selector.select2;
this.t1 = selector.button1;
this.t2 = selector.button2;
//this.move(); //实例化后直接使用
}

//通过原型方式扩展方法
moveSelect.prototype = {
move: function(){
var _self = this;
_self.t1.onclick = function(){
var count = 0;
for(var i=0; i<_self.s1.length; i++){
if(_self.s1[i].selected){
_self.s2.options.add(new Option(_self.s1[i].text, _self.s1[i].value));
count++;
}
}
for(var s=0; s<count; s++){
_self.s1.remove(_self.s1.selectedIndex);
}
}
_self.t2.onclick = function(){
var count = 0;
for(var i=0; i<_self.s2.length; i++){
if(_self.s2[i].selected){
_self.s1.options.add(new Option(_self.s2[i].text, _self.s2[i].value));
count++;
}
}
for(var s=0; s<count; s++){
_self.s2.remove(_self.s2.selectedIndex);
}
}
}
}

//调用
var sElement = {
select1:document.getElementById("leftBox"),
select2:document.getElementById("rightBox"),
button1:document.getElementById("goRight"),
button2:document.getElementById("goLeft")
};
var m1 = new moveSelect(sElement);
m1.move();
</script>
</body>
</html>

javascript 列表框左右移动类