jQuery的下拉框应用

jQuery的下拉框左右选择应用

直接上代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <style type="text/css">
  7. * { margin:0; padding:0; }
  8. div.centent {
  9. float:left;
  10. text-align: center;
  11. margin: 10px;
  12. }
  13. span {
  14. display:block;
  15. margin:2px 2px;
  16. padding:4px 10px;
  17. background:#898989;
  18. cursor:pointer;
  19. font-size:12px;
  20. color:white;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="centent">
  26. <select multiple="multiple" id="select1" style="width:100px;height:160px;">
  27. <option value="1">选项1</option>
  28. <option value="2">选项2</option>
  29. <option value="3">选项3</option>
  30. <option value="4">选项4</option>
  31. <option value="5">选项5</option>
  32. <option value="6">选项6</option>
  33. <option value="7">选项7</option>
  34. </select>
  35. <div>
  36. <span id="add" >选中添加到右边>></span>
  37. <span id="add_all" >全部添加到右边>></span>
  38. </div>
  39. </div>
  41. <div class="centent">
  42. <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
  43. <option value="8">选项8</option>
  44. </select>
  45. <div>
  46. <span id="remove"><<选中删除到左边</span>
  47. <span id="remove_all"><<全部删除到左边</span>
  48. </div>
  49. </div>
  51. <!-- 引入jQuery -->
  52. <script src="jquery.js" type="text/javascript"></script>
  53. <script type="text/javascript">
  54. $(function(){
  55. //移到右边
  56. $('#add').click(function() {
  57. //获取选中的选项，删除并追加给对方
  58. $('#select1 option:selected').appendTo('#select2');
  59. });
  60. //移到左边
  61. $('#remove').click(function() {
  62. $('#select2 option:selected').appendTo('#select1');
  63. });
  64. //全部移到右边
  65. $('#add_all').click(function() {
  66. //获取全部的选项,删除并追加给对方
  67. $('#select1 option').appendTo('#select2');
  68. });
  69. //全部移到左边
  70. $('#remove_all').click(function() {
  71. $('#select2 option').appendTo('#select1');
  72. });
  73. //双击选项
  74. $(document).on("dblclick", "#select1 option", function(){
  75. $(this).removeAttr("selected").appendTo('#select2');
  76. });
  77. //双击选项
  78. $(document).on("dblclick", "#select2 option", function(){
  79. $(this).removeAttr("selected").appendTo('#select1');
  80. });
  81. });
  82. </script>
  83. </body>
  84. </html>

jQuery的下拉框应用的更多相关文章

  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.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

随机推荐

  1. 转载 javaweb三大框架和MVC设计模式 （自己加拉些内容）

    javaweb三大框架和MVC设计模式 一.MVC设计模式 1.MVC的概念 首先我们需要知道MVC模式并不是javaweb项目中独有的,MVC是一种软件工程中的一种软件架构模式,把软件系统分为三个基 ...

  2. js流程控制；常用内置对象

    一.流程控制 1.if .if-else.if-else if-else var ji = 20; if(ji >= 20){ console.log('大吉大利,晚上吃鸡') } alert( ...

  3. 树链剖分【洛谷P2590】 [ZJOI2008]树的统计

    P2590 [ZJOI2008]树的统计 题目描述 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把 ...

  4. Opencv图像连通域

    [摘要] 本文介绍在图像处理领域中较为常用的一种图像区域(Blob)提取的方法——连通性分析法(连通区域标记法). 文中介绍了两种常见的连通性分析的算法:1)Two-pass:2)Seed-Filli ...

  5. HIbernate | 简单对象嵌套实践

    src/entity/Course.java public class Course { private Integer courseNo; private String courseName; pu ...

  6. POJ1063 Flip and Shift

    题目来源:http://poj.org/problem?id=1063 题目大意: 有一种游戏如图所示.一个填满黑白球的转盘,它可以有两种操作,一种是将大转盘顺时针旋转,所有球的位置顺时针挪一位,另一 ...

  7. SprimgMVC学习笔记（七）—— 上传图片

    一.配置虚拟目录 在tomcat上配置图片虚拟目录,在tomcat下conf/server.xml中添加: <Context docBase="D:\upload\temp" ...

  8. Mybatis学习笔记(四) —— SqlMapConfig.xml配置文件

    一.properties(属性) SqlMapConfig.xml可以引用java属性文件中的配置信息 在config下定义db.properties文件,如下所示: db.properties配置文 ...

  9. Linux软件源apt 仓库 包 的概念

    概念介绍: 软件源是debian系的概念,把软件放在一个pool里面,用一条命令就可以自动从指定服务器下载并安装. 源列表是/etc/apt/sources.list,里面写了你所用的服务器地址 (其 ...

  10. HDU - 1878 欧拉回路 （连通图+度的判断）

    欧拉回路是指不令笔离开纸面,可画过图中每条边仅一次,且可以回到起点的一条回路.现给定一个图,问是否存在欧拉回路? Input 测试输入包含若干测试用例.每个测试用例的第1行给出两个正整数,分别是节点数 ...