两个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> 动态 ...

随机推荐

win10 64位专业版系统中显示32位dcom组件配置的方法
word.excel是32位的组件,当用户64位系统在运行窗口中输入dcomcnfg命令时,在打开的组件服务管理窗口,是找不到Microsoft Excel.word程序的.另外,Windows 环境 ...
三种执行SQL语句的的JAVA代码
问题描述: 连接数据库,执行SQL语句是必不可少的,下面给出了三种执行不通SQL语句的方法. 1.简单的Statement执行SQL语句.有SQL注入,一般不使用. public static voi ...
Oracle 中 decode 函数用法
Oracle 中 decode 函数用法含义解释:decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下:IF 条件=值1 THEN RETURN(翻译 ...
如何查看编译安装的lnmp环境各自的配置参数
安装好后如何查看mysql/apache/nginx/php安装参数查看mysql编译参数: cat /usr/local/mysql/bin/mysqlbug | grep CONFIGURE ...
Selector
原文: https://developer.apple.com/library/ios/documentation/General/Conceptual/DevPedia-CocoaCore/Sele ...
Netty入门学习
一.他山之石 Netty实现原理浅析 http://www.importnew.com/15656.html netty线程模型 http://www.infoq.com/cn/articles/ne ...
为什么质数检验到 N的开方就可以结束了
以为所有N的除数都是以根号N为轴对称的. 例如16的开方为4: 16%1 == 0 则1 与 16 都是16的除数. 16%2 == 0 则2 与 8 都是16的除数. 16%4 ==0 则4 为16 ...
EBS提交请求出现REP-3000错误
在AIX上利用并发请求提交报表的時候,出现如下错误:REP-3000: Internal error starting Oracle Toolkit.这是因为Report Server需要X-Wind ...
windows安装zookeeper-单机模式
zookeeper下载地址:http://zookeeper.apache.org/releases.html#download 本次使用的是3.4.9版本前提:请安装JDK 安装: 创建安装目 ...
Canvas制作天气预报走势图
要实现的效果如下图: HTML代码如下: ;;;;;;;;;;; }

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

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

随机推荐

热门专题