教程源码: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双下拉框内容的左右移动的更多相关文章

  1. jQuery之双下拉框

    双下拉框要实现的效果,实际上就是左边下拉选择框里的内容,可以添加到右边,而右边同理.写了个简单的例子,来说明一下. 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  2. JQuery打造下拉框联动效果

    做联动效果,若是用纯JavaScript来做,往往须要辅助页面保存须要刷新的结果集,然后渲染到原页面.考虑将须要动态刷新的内容自己主动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后 ...

  3. jQuery操作下拉框的text值和val值

    jQuery操作下拉框的text值和val值 1,JS源码 <select name="select1" id="select1" style=" ...

  4. js改变下拉框内容

      js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...

  5. jquery对下拉框的操作

     jQuery对下拉框的操作 /获取第一个option的值 $('#test option:first').val(); //最后一个option的值 $('#test option:last').v ...

  6. jquery div 下拉框焦点事件

    这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...

  7. Jquery操作下拉框(DropDownList)实现取值赋值

    Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...

  8. jquery 获取下拉框值与select text

    下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...

  9. jQuery对下拉框Select操作总结

    jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

随机推荐

  1. Git 远程仓库(分布式版本控制系统)

    前言 远程仓库是指托管在因特网或其他网络中的你的项目的版本库.你可以有好几个远程仓库,通常有些仓库对你只读,有些则可以读写. 1.查看远程仓库 如果想查看你已经配置的远程仓库服务器,可以运行 git ...

  2. solr开发从查询结果集中获取对象数据

    solrJ从查询结果集中获取对象数据. 方案一:自定义转换方式 /** * * SolrDocument与实体类转换 [测试通过] * * @author pudongping * * @param ...

  3. Go语言开发的第一步,安装开发环境编写第一个Go程序

    关于go就不介绍了,google自己的语言.其它的百科,最近比较郁闷,处于纠结状态,不想说话,真心不想说话. 开发工具安装: 安装包下载: http://code.google.com/p/go/do ...

  4. Oracle 12C -- 扩展varchar2、nvarchar2、和raw数据类型的大小限制

    在12C中,varchar2,nvarchar2和raw类型从之前的4K扩展到32K 升级到12C后,参数max_string_size默认值是standard,即不改变varchar2.nvarch ...

  5. CStatic的透明背景方法

    原文链接: http://blog.sina.com.cn/s/blog_4a470fcc01000406.html 这篇文章中有些许错误,不过思路值得借鉴   如果在一个有颜色的窗体中创建一个CSt ...

  6. 如何查看java进程

    一.Linux篇方法一 ps -ef|grep java 方法二 jps -l (显示java进程的Id和软件名称) jps -lmv(显示java进程的Id和软件名称:显示启动main输入参数:虚拟 ...

  7. zookeeper 的日常管理

    http://www.cnblogs.com/ggjucheng/p/3352591.html

  8. Spring Security教程(四):自定义登录页

    在前面的例子中,登陆页面都是用的Spring Security自己提供的,这明显不符合实际开发场景,同时也没有退出和注销按钮,因此在每次测试的时候都要通过关闭浏览器来注销达到清除session的效果. ...

  9. WPF对象级资源的定义与查找

    文章概述: 本演示介绍了怎样定义WPF对象级的资源,并通过XAML代码和C#訪问和使用对象级资源. 相关下载(代码.屏幕录像):http://pan.baidu.com/s/1hqvJNY8 在线播放 ...

  10. 如何安全的下载Devcon.exe文件

    devcon.exe是windows设备管理器的命令行版本,可以让你在cmd中修改设备,但是微软没有提供单独的下载,只能下载一个2G多的wdk包(windows drive kits)才行.私下使用别 ...