天易23----jquery实现下拉菜单的左右移动
来源:互联网 发布:软件开发技术发展趋势 编辑:程序博客网 时间:2024/06/05 18:21
功能说明:该实例包括选中一项或多项点击选中右移按钮将选中的选项右移到右边的菜单,也可选择全部右移按钮将左菜单的所有选项全部右移右边菜单,或双击左菜单中的选项右移到右下拉菜单,最后点击“提交”按钮查看右菜单选项中的所选选项,右菜单操作和左菜单的操作一样,具体操作详见下边示例!
一:总体实现效果图:
1):
2):当点击提交按钮时,会弹出对话框查看右菜单中的选项
二:示例代码:
1)elevenjsp.js代码:
$(document).ready(function(){$('#add').click(function(){$('#select1 option:selected').appendTo('#select2');});$('#add_all').click(function(){$('#select1 option').appendTo('#select2');});$('#remove').click(function(){$('#select2 option:selected').appendTo('#select1');});$('#remove_all').click(function(){$('#select2 option').appendTo('#select1');});//双击选项的时候实现右移,双击事件:dblclick$('#select1').dblclick(function(){$('#select1 option:selected').appendTo('#select2');});//双击选项的时候实现左移,双击事件:dblclick$('#select2').dblclick(function(){$('#select2 option:selected').appendTo('#select1');});//点击提交按钮查看所选内容 $('#send').click(function(){ var str="你选择的是:"; $('#select2 option').each(function(){str+=$(this).val()+",";//接收显示所选复选框的内容}); alert(str); });});
2)页面代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title></title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script type="text/javascript" src="<%=basePath %>js/jquery-1.6.4.min.js"></script><script type="text/javascript" src="<%=basePath %>js/elevenjsp.js"></script><style type="text/css">*{padding:0;margin:0;}body {padding:100px;font-size:12px;font-family:"宋体";}select{width:100px;height:170px;padding:5px;}.content{float:left;text-align:center;margin-right:10px;}span{display:block;width:90px;cursor:pointer;background:#eee;border:1px solid #ccc;padding:5px 0;margin:5px 0;}</style> </head><body><div class="content"><select multiple="multiple" id="select1"><option value="1" >选项1</option><option value="2">选项2</option><option value="3">选项3</option><option value="4">选项4</option><option value="5">选项5</option><option value="6">选项6</option><option value="7">选项7</option></select><span id="add">选中右移>></span><span id="add_all">全部右移>></span></div><div class="content"><select multiple="multiple" id="select2"></select><span id="remove">选中左移>></span><span id="remove_all">全部左移>></span><input type="button" id="send" value="提 交"/></div></body></html>
- 天易23----jquery实现下拉菜单的左右移动
- 实现左右移动的下拉菜单效果
- js实现的下拉菜单的左右移动
- jquery实现可以左右选择的下拉菜单效果
- jquery实现下拉框内容左右移动
- jquery 实现左右下拉列表 选项 移动
- jquery实现点击按钮左右移动的菜单
- jQuery实现两个下拉菜单的选项互相移动效果
- jquery子元素选择器、form属性选择器和实现可以左右选择的下拉菜单效果
- Jquery实现的下拉菜单
- jquery 实现菜单的下拉菜单
- 左右的移动<<>><>jQuery的实现
- jquery实现select多选框的左右移动
- JavaScript 的 DOM 实现左右选择的下拉菜单效果
- JavaScript 的 DOM 实现左右选择的下拉菜单效果
- query实现可以左右的下拉菜单效果
- Jquery下拉框 左右添加删除移动
- jquery 实现下拉菜单
- GCD之dispatch queue
- 逆元详解
- VC6.0多行代码注释工具,VC6.0怎么添加多行注释
- iOS多线程
- C中关于sin(),cos(),pow()函数使用的一个问题
- 天易23----jquery实现下拉菜单的左右移动
- SQLite剖析(8):原子提交原理
- WinCE6 RIL驱动开发日志(五)
- Eclipse可视化编程
- 打印出所有的"水仙花数"
- 2012.11.24
- main函数能调用吗?
- Android开发环境搭建--Helloworld
- 一次代码重构之旅-快速读写xml文件工具类封装