jQuery实现选项内容的左右移动效果

原创 2012年03月21日 19:32:18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>


<script language="javascript" type="text/javascript">

$(document).ready(function (){
		
    
	//为添加按钮增加事件
	$("#leftbtn").click(function (){
		
		//获取选择的值
		$("#leftop option:selected").each(function (i){		
			
			//在右边添加所选值,并且添加之后在左边删除所选值
			$("#rightop").append("<option>"+this.text+"</option>");
		  		 
		}).remove();
		
	});
	
	
	
	//为删除按钮增加事件
	$("#rightbtn").click(function (){
		
		//获取所选择的值
		$("#rightop option:selected").each(function (i){		
			
			//在左边添加所选值,并且添加之后在右边删除所选值
			$("#leftop").append("<option>"+this.text+"</option>");
				 
		}).remove();
		
	});
	
	
	
	//增加删除按钮事件
	$("#del").click(function (){
		
		//获取要删除的值
		$("#rightop option:selected,#leftop option:selected").each(function (i){		
			
			//删除所选值
			$(this).remove();
				 
		});
		
	});
	
});


</script>



</head>

<body>
<table width="387" height="283" border="0">
  <tr>
    <td height="21" colspan="4"> </td>
  </tr>
  <tr>
    <td width="72" rowspan="7">
    <select id="leftop" multiple="multiple" size="12" style="width:150px; height:180px;">
    	<option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">保定</option>
        <option value="4">辽宁</option>
        <option value="5">天津</option>
        <option value="6">云南</option>
        <option value="7">广东</option>
        <option value="8">山东</option>
        <option value="9">河南</option>
        <option value="10">山西</option>
        
    </select>
    </td>
    <td width="70" height="21"> </td>
    
    <td colspan="2" rowspan="7">
    <select id="rightop" multiple="multiple" size="12" style="width:150px; height:180px;">
   	
    
    </select>
    </td>
  </tr>
  <tr>
    <td height="36" align="center" valign="middle"><input id="leftbtn" type="button" value=">>"/></td>
  </tr>
  <tr>
    <td height="27" align="center"> </td>
  </tr>
  <tr>
    <td height="38" align="center" valign="middle"><input id="del" type="button" value="删除"/></td>
  </tr>
  <tr>
    <td height="37" align="center" valign="middle"> </td>
  </tr>
  <tr>
    <td height="34" align="center" valign="middle"><input id="rightbtn" type="button" value="<<"/></td>
  </tr>
  <tr>
    <td height="21" align="center" valign="middle"> </td>
  </tr>
  <tr>
    <td height="21" colspan="4"> </td>
  </tr>
</table>


</body>
</html>


使用jquery实现上下左右移动效果

1                 2                 3                 4                 5                 6   ...
  • hunannanhu
  • hunannanhu
  • 2015年05月29日 12:13
  • 1019

Jquery 动画效果 左右移动

移动位置的动画 body{fo
  • lishaojun0115
  • lishaojun0115
  • 2016年01月16日 15:33
  • 3191

jquery实现选项在两个下拉列表之间选择性移动的功能

jquery实现选项在两个下拉列表之间选择性移动的功能 jquery的强大是不言而喻的,你可以发挥自己创意的大脑,编写出各种各样奇妙的效果,下面是两个下拉列表,这里面的选项可以在两者之间通过按钮选择...
  • xiaobozhu
  • xiaobozhu
  • 2015年08月18日 15:27
  • 1828

手机端图片左右滑动效果实现

起初我想尝试用jQuery Mobile的swipeleft和swiperight,可以实现手势左右滑动的效果,但是jQuery Mobile对页面的其它部分影响很大,所以不得不放弃使用。接着我又尝试...
  • cwzhsi
  • cwzhsi
  • 2016年01月25日 16:32
  • 7612

javascript之选项左右移动

效果: 无标题文档                             选项1           选项2   ...
  • zhixinhuacom
  • zhixinhuacom
  • 2013年12月10日 13:23
  • 764

js案例 移动端左右滑动touch+transform

*{ padding: 0; margin: 0; /*margin-top:100px;*/ } #move{ height: 80px; wid...
  • u011301203
  • u011301203
  • 2016年11月29日 22:44
  • 3502

jquery ul li左右拖动

最近做影视的时候  遇到一个集数分集显示,类似下面的效果【用的jquery iscroll插件】 在手机端预览的时候可以左右拖动集数 效果如下 html: ...
  • u011650048
  • u011650048
  • 2015年07月22日 13:54
  • 1810

jquery 图片左右切换,一长条的显示,点击左右移动。

菜鸟啊,想了一天才写出来
  • sikey_li
  • sikey_li
  • 2014年11月05日 23:10
  • 1706

移动端图片左右滑动效果

在移动端的网站或者APP中,图片左右滑动很常见,用户的体验也非常不错。我只要使用JQuery来实现此效果。话不多说,直接上代码。1.html,css部分 html部分: ...
  • hzschqh
  • hzschqh
  • 2017年04月28日 23:51
  • 1852

移动web最简洁的滑动效果Swipe JS(适合初学者)

之前一直都是后台开发,最近要做一个前台相关的项目,
  • xiongxianhe
  • xiongxianhe
  • 2014年10月11日 15:03
  • 102127
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery实现选项内容的左右移动效果
举报原因:
原因补充:

(最多只允许输入30个字)