JQuer版---列表框移动

最新推荐文章于 2021-05-25 19:31:08 发布

君醉酒

最新推荐文章于 2021-05-25 19:31:08 发布

阅读量952

点赞数

分类专栏： JQuery 文章标签： jquery dom 列表框移动

本文链接：https://blog.csdn.net/rain097790/article/details/11178083

版权

JQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

之前使用DOM对象写了个列表框移动，非常繁琐，选择使用JQuery重写，只有几行代码显得非常简洁方便。原：DOM应用案例--列表框移动。

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
  	<div>	
	  	<select style="width:60px" multiple size="10" id="leftID">
	  		<option>选项A</option>
	  		<option>选项B</option>
	  		<option>选项C</option>
	  		<option>选项D</option>
	  		<option>选项E</option>
	  		<option>选项F</option>
	  		<option>选项G</option>
	  		<option>选项H</option>
	  		<option>选项I</option>
	  		<option>选项J</option>
	  	</select>
  	</div>
  	<div style="position:absolute;left:100px;top:60px">
  		<input type="button" value="批量右移" id="rightMoveID"/>
  	</div>
  	<div style="position:absolute;left:100px;top:90px">
  		<input type="button" value="全部右移" id="rightMoveAllID"/>
  	</div>
  	<div style="position:absolute;left:220px;top:20px">	
	  	<select multiple size="10" style="width:60px" id="rightID">
	  	</select>
  	</div>
  </body>
  <script type="text/javascript">
  	//批量右移
  	$("#rightMoveID").click(function(){
  		$("#rightID").append( $("#leftID option:selected") );
  	});
  	
  	//双击右移
  	$("#leftID").dblclick(function(){
  		$("#rightID").append( $("#leftID option:selected") );
  	});
  	
  	//全部右移
  	$("#rightMoveAllID").click(function(){
  		$("#rightID").append( $("#leftID option") );
  	});
  	
  
  
  </script>
</html>

君醉酒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuer版---列表框移动

之前使用DOM对象写了个列表框移动，非常繁琐，选择使用JQuery重写，只有几行代码显得非常简洁方便。原：DOM应用案例--列表框移动。代码：选项A 选项B 选项C 选项D 选项E 选项F 选项G 选项H 选项I 选项J
复制链接

扫一扫