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

來源:互聯網
上載者:User

<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 列表框左右移動 類
北京 上海 廣州 深圳


成都 深圳 南京 天津

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。