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

随机推荐

OperateLoger
protected void Page_Load(object sender, EventArgs e) { OperateLoger.FunctionInfo =new FunctionInfo { ...
LibreOffice去重复数据
菜单:数据--更多筛选---标准筛选点开“选项”,勾上“无重复值”. 然后还可以把结果复制到其它单元格.
配置hadoop
1.$ tar -zxvf hadoop-1.0.3.tar.gz 2.添加hadoop到环境变量 root登陆: sudo su 修改环境变量:vi /etc/environment 添加: / ...
cas单点登录搭建
Cas Server下载:http://developer.jasig.org/cas/ Cas Client下载:http://developer.jasig.org/cas-clients/ 测试 ...
Quartz 学习记录1
原因公司有一些批量定时任务可能需要在夜间执行,用的是quartz和spring batch两个框架.quartz是个定时任务框架,spring batch是个批处理框架. 虽然我自己的小玩意儿平时不 ...
Ubuntu下通过SSH远程登录服务器的方法
1. 首先在服务器上安装ssh的服务器端.$ sudo aptitude install openssh-server 2. 启动ssh-server.$ /etc/init.d/ssh restar ...
记录我学github的路程（三）
2015-12-22 更新一.Bug分支 1,假设如下场景,你正在dev分支工作,突然接到一个修复代号为101的bug的任务时,dev的东西还没不能提交,但是bug需要马上修复. Git提供了一个s ...
[原创]Matlab2016b打包为C++的lib文件
这几天在研究如何将Matlab的程序导入到C++进行调用. 由于需要使用到不少Matlab函数,所以之前就有些担心这些函数在导出后是否能够继续使用.不过之后觉得既然已经导出成了一个单独文件,相关运算应 ...
Java性能调优之：idea变慢解决
今天搬砖的时候遇到一个问题,idea总是卡死,完全无法愉快的玩耍.幸好机器是Linux系统的.于是通过以下方式解决了问题: 通过top命令,查看系统运行状态发现4个CPU中有1个CPU用户占用率为10 ...
ubuntu系统theano和keras的安装
说明:系统是unbuntu14.04LTS,32位的操作系统,以前安装了python3.4,现在想要安装theano和keras.步骤如下: 1,安装pip sudo apt-get install ...

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

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

随机推荐

热门专题