如图,可以通过中间的按钮将左边选中的选项添加到右边,或者全部添加到右边,也可通过双击添加。反之也可以。

左边选中加到右边:

$("#add").click(function(){  //添加按钮点击事件
var op = $("#select1 option:selected"); //获取选中的选项
op.appendTo("#select2"); //把选中的选项添加到右边的select中,appendTo可以删除左边的并添加到右边
});

左边全部添加到右边:

$("#add-all").click(function(){  //添加全部按钮点击事件
var op = $("#select1 option"); //获取全部选项
op.appendTo("#select2"); //全部添加到右边的select
});

双击添加到右边:

$("#select1").dblclick(function(){  //给select1添加双击事件
var op = $("option:selected", this) //获取选中的选项,注意写法
op.appendTo("#select2"); //追加给select2
});

锋利的jQuery-5--下拉框的应用(看写法)的更多相关文章

  1. jquery div 下拉框焦点事件

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

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

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

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

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

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

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

  5. js,jquery获取下拉框选中的option

    js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...

  6. Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢)

    Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢) 1. 获取选中项: 获取选中项的Value值: $('select#sel option:selected').val() ...

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

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

  8. jquery获得下拉框值的代码

    jquery获得下拉框值的代码   获取Select :  获取select 选中的 text :  $("#ddlRegType").find("option:sele ...

  9. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

  10. jQuery的下拉框应用

    jQuery的下拉框应用 jQuery的下拉框左右选择应用 直接上代码 <!DOCTYPE html> <html> <head> <meta charset ...

随机推荐

  1. U3D 动态创建Prefab的多个实例

    情景:我们有一个mytest脚本,一个my_prefab预置体 想在在这个脚本的start()方法中复制多个my_prefab的实例.有3种方法: 1,将预置体my_prefab放于Resouce文件 ...

  2. linux内核分析 期中总结

    LINUX内核分析 链接汇总 LINUX内核分析第一周学习总结——计算机是如何工作的 LINUX内核分析第二周学习总结——操作系统是如何工作的 LINUX内核分析第三周学习总结——构造一个简单的Lin ...

  3. BASE64Decoder 编码(sun.jar)

    Base64 是网络上最常见的用于传输8Bit 字节代码的编码方式之一,大家可以查看RFC2045 -RFC2049 ,上面有MIME 的详细规范.  Base64 要求把每三个8Bit 的字节转换为

  4. Node基础:资源压缩之zlib

    概览 做过web性能优化的同学,对性能优化大杀器gzip应该不陌生.浏览器向服务器发起资源请求,比如下载一个js文件,服务器先对资源进行压缩,再返回给浏览器,以此节省流量,加快访问速度. 浏览器通过H ...

  5. 扫描二维码下载安装apk的app

    将apk文件放到服务器上,下载链接直接生成二维码,用微信扫描时不能直接下载.页面只是刷新一下. 想实现微信扫描下载apk的app客户端,需要把下载链接做到一个网页上, 将网页生成一个二维码. 直接下载 ...

  6. 关于 hangfire 初始化工作机制

    hangfire初始化的配置方法 :UseHangfire . public static class OwinBootstrapper { /// <summary> /// Boots ...

  7. ECMAScript —— 学习笔记(思维导图版)

    导图

  8. ThreadLocal模式的核心元素

    首先来看ThreadLocal模式的实现机理:在JDK的早期版本中,提供了一种解决多线程并发问题的方案:java.lang.ThreadLocal类.ThreadLocal类在维护变量时,世纪使用了当 ...

  9. android学习——error opening trace file: No such file or directory (2)

    1.疑惑: 程序运行起来的时候日志总是显示下面这个错误,但是不影响程序的正常进行,我是用真机来测试的,android4.4.4(API17). 02-11 14:55:03.629 15525-155 ...

  10. java多线程-CountDownLatch

    简介 一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待.用给定的计数 初始化 CountDownLatch.由于调用了 countDown() 方法,所以在当前计数 ...