教程源码: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. MongoDB学习笔记(3)--删除数据库

    MongoDB 删除数据库 语法 MongoDB 删除数据库的语法格式如下: db.dropDatabase() 删除当前数据库,默认为 test,你可以使用 db 命令查看当前数据库名. 实例 以下 ...

  2. 还没被玩坏的robobrowser(8)——robobrowser的实现原理

    背景 学习使用工具实际上不难,不过我们应该通过阅读工具源码来提升自己的水平. 多读代码,读好代码.很不错,robobrowser的代码简单易懂,值得学习. 预备知识 源码地址 一起其实是从browse ...

  3. 【转载并记录】SpringBoot 入门(一)

    https://blog.csdn.net/dhklsl/article/details/80309999 https://www.cnblogs.com/zheting/p/6707035.html ...

  4. 【转载并整理】JAVA解析或生成xml的四种方法

    参考文章 1:http://blog.csdn.net/clemontine/article/details/53011362 2:http://www.jb51.net/article/98456. ...

  5. 关于使用CTE(公用表表达式)的递归查询

    --关于使用CTE(公用表表达式)的递归查询 --CTE 的基本语法结构如下: WITH expression_name [ ( column_name [,...n] ) ] AS ( CTE_qu ...

  6. 转: 使用Hystrix实现自动降级与依赖隔离

    使用Hystrix实现自动降级与依赖隔离 原创 2017年06月25日 17:28:01 标签: 异步 / 降级 869 这篇文章是记录了自己的一次集成Hystrix的经验,原本写在公司内部wiki里 ...

  7. 订单状态 Mark

    ) { ) { ) { ) { ) { ) { ) { ) { ) { ) { ) { ) { ) { ) { ))) { ))) { ))) { ))) { )); } else { Assert. ...

  8. Knockout: 让ViewModel从htm中剥离出去。

    在一些Knockout例子中,直接在htm中添加scripts写viewmodel,如何能将让ViewModel从htm中剥离出去呢?从knockout官网上找到了解决方法,如下: 1.knockou ...

  9. SQL Server中判断字符串出现的位置及字符串截取

    首先建一张测试表: )); insert into teststring values ('张三,李四,王五,马六,萧十一,皇宫'); 1.判断字符串中某字符(字符串)出现的次数,第一次出现的位置最后 ...

  10. oozie 常用命令

    1.验证wokflow.xmloozie validate /appcom/apps/hduser0401/mbl_webtrends/workflow.xml 2.提交作业,作业进入PREP状态 o ...