两个select 左右添加，上下移动 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
	</head>
	<body>
		<center>
			 <table>
			 <tr align="center">
			  <td colspan="3">
			           选择
			  </td>
			 </tr>
			 <tr>
			  <td>
			  <select id="fb_list" name="fb_list"  multiple="multiple"
			  size="8" style="width: 300px; height:200px;">
				   <option value="1">第七项</option>
				   <option value="6">第六项</option>
			  </select>
			  </td>
			  <td>
				  <input type="button" id="selectDown" name="selectDown" value="下移∨" />
				  <br />
				  <input type="button" id="selectup" name="selectup" value="上移∧" />
				  <br />
				  <input type="button" id="add" name="add" value="向右>>" />
				  <br />
				  <input type="button" id="delete" name="delete" value="<<向左" />
				  <br />
				  <input type="button" id="selectAllRight" name="selectAllRight" value="全部右边>>" />
				  <br />
				  <input type="button" id="selectAllLeft" name="selectAllLeft" value="<<全部向左" />
			  </td>
			  <td>
			  <select id="select_list" name="select_list" multiple="multiple"
			  size="8" style="width: 300px; height:200px;">
			       <option value="1">第一项</option>
			       <option value="2">第二项</option>
				   <option value="3">第三项</option>
				   <option value="4">第四项</option>
			  </select>
			  </td>
			 </tr>
			 </table>
			 </center>
			 <script>
				//向右移动
				$(function(){
				　　$("#add").click(function(){
					      var  selectList=true;
                                            
			　　　　　　　if($("#fb_list option:selected").length>0){
                                         //判断右边有没有重复的val值
			                for(var i=0;i<$("#select_list option").length;i++){
					            if($("#fb_list option:selected").val()==$("#select_list option:eq("+i+")").val()){
					            	alert("第二个列表已经有了");
					            	selectList=false;
					            }
					           
				            }
			                if(selectList==true){
					                $("#select_list").append("<option value='"+$("#fb_list option:selected").val()+"'>"+$("#fb_list option:selected").text()+"</option");
				　　　　　　　　　　  $("#fb_list option:selected").remove();
				                    return false;
					        }
			                
			　　　　　　　}else{
			　　　　　　　　　　　alert("请选择数据");
			　　　　　　　}
				　　　})
				})
				//向左移动
				$(function(){
			　　　　　　$("#delete").click(function(){
				            var selectList=true;
		　　　　　　　　　　 if($("#select_list option:selected").length>0){
								for(var i=0;i<$("#fb_list option").length;i++){
						            if($("#select_list option:selected").val()==$("#fb_list option:eq("+i+")").val()){
						            	alert("第一个列表已经有了");
						            	selectList=false;
						            }
				                }
								if(selectList==true){
					                $("#fb_list").append("<option value='"+$("#select_list option:selected").val()+"'>"+$("#select_list option:selected").text()+"</option");
				　　　　　　　　　　  $("#select_list option:selected").remove();
				                    return false;
					            }
		　　　　　　　　　　 }else{
		　　　　　　　　　　　　　　　alert("请选择数据");
		　　　　　　　　　　 }
			　　　　　 })
			   })
				//向上移动
				$(function(){
					$("#selectup").click(function(){
						$("select option:selected").each(function(){
							$(this).prev().before($(this));
						    return false;
						});
						$("select").bind("change",function(){
							var that = $(this);
							var tempDom = that.find("option:selected");
							$("select").find("option").removeAttr("selected");
							tempDom.attr("selected","selected");
					  });
					});  
				});
				//向下移动
				$(function(){
					$("#selectDown").click(function(){
						$("select option:selected").each(function(){
							 $(this).insertAfter($(this).next());
						    return false;
						});
						$("select").bind("change",function(){
							var that = $(this);
							var tempDom = that.find("option:selected");
							$("select").find("option").removeAttr("selected");
							tempDom.attr("selected","selected");
					  });
					});  
				});
				
				//全部移到右边
				$('#selectAllRight').click(function(){
					var selectList=true;
					if($("#fb_list option:selected").length>0){
		                for(var i=0;i<$("#select_list option").length;i++){
		                	for(var j=0;j<$("#fb_list option").length;j++){
		                		if($("#select_list option:eq("+i+")").val()==$("#fb_list option:eq("+j+")").val()){
					            	alert("第二个列表已经有了");
					            	selectList=false;
					            }
		                	} 
		                }
	                	if(selectList==true){
	                		//获取全部的选项,删除并追加给对方
					        $('#fb_list option').appendTo('#select_list');
		                    return false;
	                	}
		                
			　　　　}else{
			　　　　　　　　alert("请选择数据");
			　　　　}
					
				});
				//全部移到左边
				$('#selectAllLeft').click(function(){
					var selectList=true;
					if($("#select_list option:selected").length>0){
		                for(var i=0;i<$("#fb_list option").length;i++){
		                	for(var j=0;j<$("#select_list option").length;j++){
		                		if($("#select_list  option:eq("+i+")").val()==$("#fb_list option:eq("+j+")").val()){
					            	alert("第一个列表已经有了");
					            	selectList=false;
					            }
		                	} 
		                }
		                if(selectList==true){
		                    //获取全部的选项,删除并追加给对方
					        $('#select_list option').appendTo('#fb_list');
					    }
			　　　　　}else{
			　　　　　　　　alert("请选择数据");
			　　　　　}
					
				});
				
				
			 </script>
	</body>
</html>

　　

posted @ 2016-12-06 15:40  归尘2016  阅读(398)  评论(0)    收藏  举报