JavaScript点击左右箭头可以移动选项实例代码

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > JavaScript点击左右箭头可以移动选项实例代码

大家可能都见过这样的效果功能，点击左右箭头，可以将选中的项在左右列表相互移动，下面就童工代码实例简单介绍意下如何实现此效果，希望给需要的朋友带来一定的帮助，代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</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>

代码描述：JavaScript 左右箭头移动。JavaScript点击左右箭头可以移动选项实例代码

下载全部收藏

297 396

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册