两个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>

两个select 左右添加，上下移动的更多相关文章

jQuery获取Radio选择的Value值||两个select之间option的互相添加操作(jquery实现)
jQuery获取Radio选择的Value值: 1. $("input[name='radio_name'][checked]").val(); //选择被选中Radio的Val ...
JS对select动态添加option操作（三级联动）（搜索拼接）
以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...
select元素添加option的add()方法 | try{}catch{}
1.javascript中的select元素添加option使用add()方法 select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置普通浏览器中,第二个参 ...
js实现select动态添加option
关于 select 的添加 option 应该注意的问题. 标准的做法如上也就是说,标准的做法是 s.options.add();但是如果你一定要用 s.appendChild(option);注意了 ...
js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <s ...
oracle中，将两个select语句的结果作为一个整体显示出来
如果我们需要将两个select语句的结果作为一个整体显示出来,我们就需要用到union或者union all关键字.union(或称为联合)的作用是将多个结果合并在一起显示出来.union和union ...
使用js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

随机推荐

php如何防止图片盗用/盗链的两种方法(转)
图片防盗链有什么用? 防止其它网站盗用你的图片,浪费你宝贵的流量.本文章向大家介绍php防止图片盗用/盗链的两种方法 Apache图片重定向方法设置images目录不充许http访问 Apache服 ...
修改context 和 enforce?
http://jingyan.baidu.com/article/8ebacdf0cce84849f75cd57b.html 可以彻底的关闭 selinux, selinux的配置文件在 /etc ...
Spring 的动态数据源实现
1. 配置多个数据源这里以两个c3p0数据库连接池的数据源作为实例.在Spring框架下使用c3p0的数据库需要加入c3p0-0.9.1.2.jar(现在最新的)这个支持包.这里以数据同步项目为例: ...
1、SQL Server自动化运维 - 备份(一)业务数据库
为了能够恢复数据,数据库运维基础就是备份,备份自动化也是运维自动化首要进行的. 笔者的备份自动化,通过配置表快速配置为前提,同时记录备份过程,尽可能的减少人工操作.首先将SQL Server备份按用途 ...
HDOJ 4770 Lights Against Dudely
状压+暴力搜索 Lights Against Dudely Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
User space 与 Kernel space
学习 Linux 时,经常可以看到两个词:User space(用户空间)和 Kernel space(内核空间). 简单说,Kernel space 是 Linux 内核的运行空间,User spa ...
sss
function handleTouchEvent(event) { if (event.touches.length == 1) { var output = document. ...
PYTHON 随机验证码生成
# 生成一个六位随机验证码 import random # random 生成随机数 temp = '' for i in range(6): num = random.randrange(0,6) ...
C++基础知识（5）---类和对象
终于把C++中的基础在前面的几篇博客中总结完了,可能还有一些语法还没有总结到,没关系,以后用到了再查资料就好.类是C++中的一个非常重要的概念,这是区别你使用的C++到底是面向过程还是面向对象的一个重 ...
[CodeWars][JS]实现链式加法
在知乎上看到这样一个问题:http://www.zhihu.com/question/31805304; 简单地说就是实现这样一个add函数: add(x1)(x2)(x3)...(xn) == x1 ...

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

两个select 左右添加，上下移动的更多相关文章

随机推荐

热门专题