點選左右箭頭可以移動選項例項程式碼

antzone發表於2017-03-13
原文網址 : https://www.softwhy.com/article-3138-1.html

大家可能都見過這樣的效果功能，點選左右箭頭，可以將選中的項在左右列表相互移動，下面就童工程式碼例項簡單介紹意下如何實現此效果，希望給需要的朋友帶來一定的幫助，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
select{width:50px;}
</style>
<script type="text/javascript"> 
function moveAllOptions(selone,seltwo) { 
  var opts=selone.getElementsByTagName('option'); 
  for(var i=opts.length-1;i>=0;i--) { 
    seltwo.appendChild(opts[i]);
  } 
}
function moveSelectedOptions(selone,seltwo) { 
  var opts=selone.getElementsByTagName('option'); 
  for(var i=opts.length-1;i>=0;i--) { 
    if(opts[i].selected==true) { 
      seltwo.appendChild(opts[i]); 
    } 
  } 
} 
window.onload=function(){
  var dRight=document.getElementById("dRight");
  var right=document.getElementById("right");
  var left=document.getElementById("left");
  var dLeft=document.getElementById("dLeft");
   
  var first=document.getElementById("first");
  var second=document.getElementById("second");
   
  dRight.onclick=function(){moveAllOptions(first,second);}
  right.onclick=function(){moveSelectedOptions(first,second);}
  left.onclick=function(){moveSelectedOptions(second,first);}
  dLeft.onclick=function(){moveAllOptions(first,second);}
}
</script> 
</head> 
<body> 
<select id="first" multiple="multiple"> 
  <option>新增</option> 
  <option>修改</option> 
  <option>刪除</option> 
  <option>儲存</option> 
</select> 
<input type="button" name="name" id="dRight" value=">>"/> 
<input type="button" name="name" id="right" value=">" /> 
<input type="button" name="name" id="left" value="<"/> 
<input type="button" name="name" id="dLeft" value="<<"/> 
<select id="second" multiple="multiple">
</select> 
</body> 
</html>

以上程式碼實現了我們想要的功能，點選按鈕可以實現選項的移動功能，至於排版問題這裡就不太關注了，下面介紹一下實現過程：

一.實現原理:

原理其實非常的簡單，就是使用appendChild()函式來移動元素，大家要注意此函式是移動，而不是複製一個副本再新增給指定元素。

相關閱讀:

1.appendChild()函式可以參閱js createElement()和appendChild()一章節。

2.javascript操作select可以參閱javascript動態建立select下拉選單一章節。

相關文章