javascript列表框左右移動，相容IE,FF。留著有用

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<html>
<head>
  <title>javascript 列表框左右移動</title>
  <style type="text/css">
   select{width: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{width: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 列表框左右移動類
北京上海廣州深圳

成都深圳南京天津

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More