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

左边选中加到右边:

$("#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. C++ c++与C语言的区别(实用性增强,register关键字增强,全局变量检测增强)

    //区别①:实用性增强 #include<iostream> using namespace std; //C语言中的变量都必须在作用域开始的位置定义!! //C++中更强调语言的“实用性 ...

  2. 挖Linux中的古老缩略语

    [2005-06-22 15:23][Nigel McFarlane][TechTarget] <<阅读原文>> Unix已经有35年历史了.许多人认为它开始于中世纪,这个中世 ...

  3. DataTable数据集转换为List非泛型以及泛型方式

    前言 DataTable是断开式的数据集合,所以一旦从数据库获取,就会在内存中创建一个数据的副本,以便使用.由于在实际项目中,经常会将DataTable中的每行数据转换为Model,然后放到List集 ...

  4. Windows下虚拟机安装Mac OS X ----- VM12安装Mac OS X 10.11

    Windows下虚拟机安装Mac OS X -– VM12安装Mac OS X 10.11 随着Iphone在国内大行其道,越来越多的开发者涌入iOS开发大军 中,但都苦于没有苹果机,本文即将介绍WI ...

  5. [CareerCup] 1.3 Permutation String 字符串的排列

    1.3 Given two strings, write a method to decide if one is a permutation of the other. 这道题给定我们两个字符串,让 ...

  6. SQL脚本循环修改数据库字段类型

    数据库在设计的时候也许考虑不全面,导致某些字段类型不太准确.比如设计的时候是varchar(1024),但是实际使用的时候却发现太小了,装不下,于是需要修改字段类型为ntext什么的. 我最近就遇到了 ...

  7. Linq之Linq to Sql

    目录 写在前面 系列文章 Linq to sql 总结 写在前面 上篇文章介绍了linq to xml的相关内容,linq to xml提供一种更便捷的创建xml树,及查询的途径.这篇文章将继续介绍l ...

  8. 第十一章:WEB浏览器中的javascript

    客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...

  9. C基础--C语言的数组

    数组的定义: 一.正确写法: 1.int ages[5]--定义了一个5个长度的int类型的数组 2.int ages[]={1,2,3,4,5};--定义了一个5个长度的int类型的数组,并且初始化 ...

  10. note.js之 Nodejs+Express4在windows下的配置

    本篇主要介绍一下在windows平台下采用nodejs+express4框架+Mongodb实现网站的开发.其实本人是不赞同在Windows平台下使用node.js进行开发,但由于公司后台工程师都是采 ...