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. 【Java】Strategy Pattern

    前言 如果说,商场打折针对不同的时节,比如双十一.圣诞节.春节这些值得促销的好日子,进行不同程度的降价打折从而获得最大程度上的收益,如果有一群鸭子,只会游泳.嘎嘎叫,但是某一天某种类型的鸭子学会了飞, ...

  2. Nginx服务优化配置

    1.expires缓存模块 具体配置可参考官方文档 http://nginx.org/en/docs/http/ngx_http_headers_module.html#expires [root@c ...

  3. 非maven项目 idea project structure

    原文链接:https://www.cnblogs.com/jajian/p/8081640.html 最近接手非maven项目,需要熟悉idea的project structure,以解决出现的环境报 ...

  4. 老男孩Day6作业：计算器

    作业需求: 1.实现加减乘除及拓号优先级解析 2.用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) ...

  5. 设置django在linux后台运行&查看端口使用

    1.后台运行(&),允许所有用户(0.0.0.0)访问,端口为8888 nohup python manage.py runserver 0.0.0.0 8888 & 2.由端口号88 ...

  6. C语言数据结构-单链表的实现-初始化、销毁、长度、查找、前驱、后继、插入、删除、显示操作

    1.数据结构-单链表的实现-C语言 typedef struct LNode { int data; struct LNode* next; } LNode,*LinkList; //这两者等价.Li ...

  7. pf4j实例 插件框架

    实现整个过程需要三个部分,第一就是根接口,第二是插件,第三是应用程序.这是3个java项目. 首先要下载jar包,百度搜索maven repository,然后搜索pf4j,如下图,下载第一个的相应版 ...

  8. CF912E Prime Gift 数学

    Opposite to Grisha's nice behavior, Oleg, though he has an entire year at his disposal, didn't manag ...

  9. linode出现以下报错

    Linode Manager 报错 系统重新安装后 解决办法执行  rm -rf ~/.ssh/known_hosts 再继续执行:ssh root@72.14.189.163

  10. 图片滚动插件jquery bxslider

    https://www.cnblogs.com/axl234/p/4167196.html