教程源码: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. SQL中获取排序分组后数据的脚本

    废话不多说了,先上一段代码,如下所示: select distinct   b.OrgID,b.CompanyID,b.AreaID,b.CustChannelID,b.CustID,b.SaleTo ...

  2. [译]async/await中使用阻塞式代码导致死锁 百万数据排序:优化的选择排序(堆排序)

    [译]async/await中使用阻塞式代码导致死锁 这篇博文主要是讲解在async/await中使用阻塞式代码导致死锁的问题,以及如何避免出现这种死锁.内容主要是从作者Stephen Cleary的 ...

  3. 你的应用是怎样被替换的,App劫持病毒剖析

    一.App劫持病毒介绍 App劫持是指运行流程被重定向,又可分为Activity劫持.安装劫持.流量劫持.函数运行劫持等. 本文将对最近利用Acticity劫持和安装劫持的病毒进行分析. 二.Acti ...

  4. python selenium expected_conditions使用实例

    今天正好虫师问到selenium python binding中support.expected_conditions的用法,顺手总结了一下,希望对大家有所帮助. 场景 Expected Condit ...

  5. 向量运算 与 JavaScript

    二维向量都包含两个值:方向(direction)及大小(magnitude)   这两个值可以表达出各种各样的物理特性来,比如力和运动.如两个物体间的碰撞检测.   向量的大小   虽说二维向量是对大 ...

  6. java对存放实体的list进行排序

    java对存放实体的list进行排序: List<DistributionAgentsEntity> allAgents = new ArrayList<DistributionAg ...

  7. Vivado抓取信号

    作者:桂. 时间:2018-05-03  21:16:03 链接:www.cnblogs.com/xingshansi/p/8987608.html 前言 FPGA调试需要抓取特定信号,一个直观的思路 ...

  8. Spring 注解@Component,@Service,@Controller,@Repository

    Spring 注解@Component,@Service,@Controller,@RepositorySpring 2.5 中除了提供 @Component 注释外,还定义了几个拥有特殊语义的注释, ...

  9. Subversion代码提交中的org.apache.subversion.javahl.ClientException: svn: E200007: Commit failed异常解决

    : 在切换subversion服务器地址之后,发生的无法正确提交代码的问题org.apache.subversion.javahl.ClientException: svn: E200007: Com ...

  10. Android build.gradle

    apply plugin: 'com.android.application' android { /*编译版本 , 因此我们强烈推荐总是使用最新的 SDK 进行编译 targetSdkVersion ...