JQUERY双下拉框内容的左右移动

教程源码:http://bbs.php100.com/read-htm-tid-74060.html
用到的方法为:appendTo()
格式:$(content).appendTo(selector)
appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。
click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数
$(function(){
//移到右边
$('#add').click(function() {
//获取选中的选项,删除并追加给对方
$('#select1 option:selected').appendTo('#select2');
});
//移到左边
$('#remove').click(function() {
$('#select2 option:selected').appendTo('#select1');
});
//全部移到右边
$('#add_all').click(function() {
//获取全部的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function() {
$('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').dblclick(function(){ //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo('#select2'); //追加给对方
});
//双击选项
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
});
});
JQUERY双下拉框内容的左右移动的更多相关文章
- jQuery之双下拉框
双下拉框要实现的效果,实际上就是左边下拉选择框里的内容,可以添加到右边,而右边同理.写了个简单的例子,来说明一下. 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
- JQuery打造下拉框联动效果
做联动效果,若是用纯JavaScript来做,往往须要辅助页面保存须要刷新的结果集,然后渲染到原页面.考虑将须要动态刷新的内容自己主动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后 ...
- jQuery操作下拉框的text值和val值
jQuery操作下拉框的text值和val值 1,JS源码 <select name="select1" id="select1" style=" ...
- js改变下拉框内容
js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...
- jquery对下拉框的操作
jQuery对下拉框的操作 /获取第一个option的值 $('#test option:first').val(); //最后一个option的值 $('#test option:last').v ...
- jquery div 下拉框焦点事件
这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...
- Jquery操作下拉框(DropDownList)实现取值赋值
Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...
- jquery 获取下拉框值与select text
下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...
- jQuery对下拉框Select操作总结
jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...
随机推荐
- 技术的正宗与野路子 c#, AOP动态代理实现动态权限控制(一) 探索基于.NET下实现一句话木马之asmx篇 asp.net core 系列 9 环境(Development、Staging 、Production)
黄衫女子的武功似乎与周芷若乃是一路,飘忽灵动,变幻无方,但举手抬足之间却是正而不邪,如说周芷若形似鬼魅,那黄衫女子便是态拟神仙. 这段描写出自<倚天屠龙记>第三十八回. “九阴神抓”本是& ...
- 【转载】Eclipse中.setting目录下文件介绍
原文:http://blog.csdn.net/huaweitman/article/details/52351394 Eclipse在新建项目的时候会自动生成一些文件.这些文件比如.project. ...
- Ubuntu 13..04 开机后桌面问题引发的一系列问题
早上开机的时候,发现只能见到桌面,没有顶部的菜单栏,没有侧边栏(Unity桌面),不能使用快捷键(不能调出终端),貌似只能用 Ctrl Alt F1-7和关机快捷键.对于我这个刚使用Ubuntu不久的 ...
- mysql 8.0 java连接报错:Unknown system variable 'query_cache_size'
java连接mysql 8.0.11报错 java.sql.SQLException: Unknown system variable 'query_cache_size' at com.mysql. ...
- wordxml文档格式说明
近期需要对word xml文档进行各种操作,需要熟悉 wordxml 文档格式,搜索了一番后发现 open xml sdk 官网的文档最好.就按照官网说明来记录一番 1 word xml 文档基本格式 ...
- django性能优化缓存view详解
缓存提升性能: 1.通常的view会去数据库端执行相关的查询然后交由template渲染.数据库访问通常就是性能的瓶颈所在. 2.由于许多数据要很久才会变一次.两次连续的数据库访问通常返回的数据是一样 ...
- unity, dll is not allowed to be included or could not be found
player settings change to Net 2.0 ref: http://answers.unity3d.com/questions/485085/dll-is-not-allowe ...
- unfolding maps支持中文
由于项目需要,选择了processing+unfolding的方式进行数据可是话的开发,unfolding maps是一个非常强大的地图工具,processing可以灵活自如的表达各种图形/效果.使用 ...
- 发布Asp.net core到nginx 使用nginx代理
In this guide, we will cover setting up a production-ready ASP.NET environment on an Ubuntu 16.04 Se ...
- Traefik Kubernetes 初试
traefik 是一个前端负载均衡器,对于微服务架构尤其是 kubernetes 等编排工具具有良好的支持:同 nginx 等相比,traefik 能够自动感知后端容器变化,从而实现自动服务发现:今天 ...