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. jQuery回车触发事件

    举例: 需求:要求回车触发下一步 Html部分 <div style="margin-top: 25px;"> <a href="#" cla ...

  2. swift -- 单例+ lazy懒加载 + 第三方库

    //工具类单例 static let goods : NHGoods = { let good = NHGoods() return good }() //懒加载 lazy var registerB ...

  3. python编程技巧

  4. 移动app整合个推进行消息推送

    首先前端代码写好之后进行发行打包: 然后再进行发行打包: 然后登录个推官网: 测试: 点击推送,在手机端就可以获取到信息了. java代码测试: package com.cxy.bean; impor ...

  5. windows 常用 命令

    Hyper-v管理               virtmgmt.msc 网络                         ncpa.cpl windows 远程登陆    mstsc.cpl C ...

  6. spring 配置properties 编码

    <!-- properties 配置文件 --> <bean id="propertyConfigurer" class="org.springfram ...

  7. C语言利用指针排序与选择排序算法

    //读入字符串,并排序字符串 #include <stdio.h> #include <string.h> #define SIZE 81 #define LIM 20 #de ...

  8. Asp.net获取系统信息

    [DllImport("kernel32")]        public static extern void GlobalMemoryStatus(ref MEMORY_INF ...

  9. MySQL之concat以及group_concat的用法

    本文中使用的例子均在下面的数据库表tt2下执行: 一.concat()函数 1.功能:将多个字符串连接成一个字符串. 2.语法:concat(str1, str2,...) 返回结果为连接参数产生的字 ...

  10. 08-----pymysql模块使用

    pymysql的下载和使用 exctue() 之sql注入 增.删.改:conn.commit() 查:fetchone.fetchmany.fetchall   一.pytmysql的下载和使用  ...