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. 51nod1453(排列组合)

    题目链接: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1453 题意: 中文题诶~ 思路: 因为最后一个球总是在编号比 ...

  2. luogu4088 [USACO18FEB]Slingshot

    link 这题在线得写树套树,所以我写的离线+树状数组 对于每个询问,Ans=\(\max_{j=1}^n{|a_j-x_i|+|b_j-y_i|+t_i}\) 拆成四种情况 \(x_i\le a_j ...

  3. 20.Add Two Numbers（两个链表的和）

    Level:   Medium 题目描述: You are given two non-empty linked lists representing two non-negative integer ...

  4. 7 . 动态sql-choose

    choose-when-otherwise 只能满足一个when 中的条件,互斥的条件,不能同时存在 mapper.xml <select id="selectstateByTitle ...

  5. Ubuntu Server 使用 PPA 安装 Java (JDK) 8

    前言 在 Ubuntu Server 中使用 PPA 安装 JDK 相比去 Oracle 官网下载包配置环境变量的好处是,安装方便快捷,还可以 apt-get 更新. 步骤 添加 Java 8 的 P ...

  6. apache 日志分割

    Window apache 全局设置日志分割   apache  [ httpd.conf ] 配置文件 开启日志模块:LoadModule log_config_module modules/mod ...

  7. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_运行时解析类型引用

    public sealed class Program{ public static void Main() { System.Console.WriteLine("Hi"); } ...

  8. 【CodeForces - 1034B】Little C Loves 3 II

    @中文题意@ n*m的矩阵,当两个点(x1, y1)与(x2, y2)曼哈顿距离为3时可以将两个点匹配.每个点只能够与一个点匹配.求最多能可以匹配多少个点.n,m <= 10^9 (xi,yi) ...

  9. 江西财经大学第一届程序设计竞赛 H

    链接:https://www.nowcoder.com/acm/contest/115/H来源:牛客网 题目描述 晚上,小P喜欢在寝室里一个个静静的学习或者思考,享受自由自在的单身生活. 他总是能从所 ...

  10. shell编程上

    1.1  前言 1.1.1  为什么学Shell Shell脚本语言是实现Linux/UNIX系统管理及自动化运维所必备的重要工具, Linux/UNIX系统的底层及基础应用软件的核心大都涉及Shel ...