教程源码: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. golang学习 ----获取URL

    package main import ( "fmt" "io/ioutil" "net/http" "os" ) fu ...

  2. C# 禁止datagridview 自动产生列

    dataGridView1.AutoGenerateColumns = false;

  3. SQL Performance Analyzer

    SQL Performance Analyzer 系统发生变更,比如升级数据库.增加索引,都会可能导致sql的执行计划发生改变,从而影响sql的性能. 如果能预知系统变更会对sql的性能的影响,就可以 ...

  4. ORA-65179: cannot keep datafiles for a pluggable database that is not unplugged

    SQL> drop pluggable database pdb2; drop pluggable database pdb2 * ERROR at line : ORA-: cannot ke ...

  5. 两张图看清SharePoint 2013 Farm 逻辑体系结构

    前篇文章分析了SharePoint 2013 的物理拓扑结构.物理拓扑分为3层(2层),详情参见<SharePoint 2013 Farm (多层服务器)安装指南——Least Privileg ...

  6. SQLServer2012 (非)聚集索引存储探究

    SQLServer2012 (非)聚集索引存储探究 Author:zfive5(zidong) Email:zfive5@163.com 引子 因为写了前一篇文字<SQLServer2012 表 ...

  7. 数据仓库和ETL建设

    这个是Ralph kimball ETL的书籍,其中第10章主要讲如何管理数据仓库团队,ETL团队是属于数据仓库团队的:第一章和第二章是概况性的介绍,强烈建议大家都看下1/2/10章,对于大家形成对数 ...

  8. django 文档生成器

    参考博客:http://www.liujiangblog.com/course/django/160

  9. 有关 WCF 的一些错误处理

    错误消息: System.ServiceModel.EndpointNotFoundException: 无法调度消息,因为终结点地址"net.tcp://localhost/xxx.svc ...

  10. JVM调优——之CMS GC日志分析

    最近在学习JVM和GC调优,今天总结下CMS的一些特点和要点,让我们先简单的看下整个堆年轻代和年老代的垃圾收集器组合(以下配合java8完美支持,其他版本可能稍有不同),其中标红线的则是我们今天要着重 ...