jquery实现点击按钮左右移动的菜单

原创 2012年03月25日 20:23:10
<!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 src="jquery/jquery-1.7.1.js"></script>
<script>
$(document).ready(function (){
	//处理向右侧添加一个选项的事件
	$('#right_one').click(function (){
		//向右侧添加一个
		$('#second').append($('#first option:selected'));
		});
	//------------处理向右插入的内容全部
		$('#right_all').click(function (){
		//向右侧添加一个
		$('#second').append($('#first option'));
		});
		
		//处理向左侧添加一个选项的事件
	$('#left_one').click(function (){
		//向左侧添加一个
		$('#first').append($('#second option:selected'));
		});
	//------------处理向左插入的内容
		$('#left_all').click(function (){
		//向左侧添加一个
		$('#first').append($('#second option'));
		});
		//双击事件
	$('#first').dblclick(function (){
		//向左侧添加一个
		$('#second').append($('#first option:selected'));
		});
	$('#second').dblclick(function (){
		//向左侧添加一个
		$('#first').append($('#second option:selected'));
		});
	});
</script>
</head>

<body>
<table width="300" border="1">
  <tr>
    <td><select id='first' style="width:100px;" size="10" multiple="multiple">
                <option>aa</option> 
                <option>aa</option>
        </select>
      </td>
    <td>
    <input type="button" id="right_one" value="->"> 
    <input type="button" id="left_one" value="<-"> 
    <input type="button" id="right_all" value="=>"> 
    <input type="button" id="left_all" value="<="> 
    </td>
    <td><select id='second' style="width:100px;" size="10" multiple="multiple">
                <option>aa</option> 
                <option>aa</option>
        </select>
        </td>
  </tr>
</table>

</body>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

使用jQuery实现点击左右滑动切换特效

此文为转载  http://www.cnblogs.com/grnBlogs/p/4667916.html 使用jQuery实现点击左右滑动切换特效: HTML代码如下: 1 2 ...

JS控制点击按钮图片向左或向右循环移动滚动效果

JS控制点击按钮图片向左或向右移动效果 演示 TABLE { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORD...

jquery 实现左移、右移

我们实现一个如下图所示的功能: 选中左侧的数据,把选中的数据右移到右侧的div中: html代码如下: > " title="...

jquery数据表左右滑动显示

最近工作中用到的 我当时做的小例子传上来 以备将来重用jquery中有上下滑动的方法slideUp()、slideDown() 但是没有现成的左右滑动的方法 希望能早日加入slideLeft()、sl...

jQuery实现左右滑动的toggle

我们知道使用 jQuery 来实现上下移入移除,可以直接使用 slideUp() 和 slideDown() 方法。slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的...

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

无标题文档 $(document).ready(function (){ //为添加按钮增加事件 $("#leftbtn").click(function (){ ...

Jquery 动画效果 左右移动

移动位置的动画 body{fo
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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