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. oracle select非group by的字段

    可以把group by的结果集当作一个表,然后从这里表里取数就可以了. e.g. SELECT A.PROJECT_CODE,A.DIE_NO,E.ONE_CONSUMING FROM (SELECT ...

  2. 【BZOJ 3326】[Scoi2013]数数

    题目描述 Fish 是一条生活在海里的鱼,有一天他很无聊,就开始数数玩.他数数玩的具体规则是: 确定数数的进制B 确定一个数数的区间[L, R] 对于[L, R] 间的每一个数,把该数视为一个字符串, ...

  3. 对于vue的一些理解

    首先是组件之间的通信方式 父组件到子组件的通信: props和$refs 子组件到父组件的通信: events 和 $parents 以及 $root 组件之间的通信 eventBus和vuex ev ...

  4. 使用RestTemplate时报错java.lang.IllegalStateException: No instances available for 127.0.0.1

    我在RestTemplate的配置类里使用了 @LoadBalanced@Componentpublic class RestTemplateConfig { @Bean @LoadBalanced ...

  5. DRF教程7-token认证

    Authentication 认证是将一个传入的请求和一组标识凭据相关联的机制,比如请求过来的用户,或者用户登录时携带的token. 然后权限策略就能使用这些凭据来决定是否允许这个请求. REST框架 ...

  6. <aop:aspectj-autoproxy proxy-target-class="false"/>导致出现404状态码

    今天干活的时候,由于是一个web应用,想在每次发送请求和返回响应的时候记录日志,也就是代理Controller,想起了之前的spring AOP,于是按照之前的配置配置好了,可是发现每次前端发送请求都 ...

  7. JS执行顺序-函数声明提升、匿名函数、函数表达式

    大方向上: JS 是按照 代码块 进行 编译.执行 的. 学习至: 1.变量声明提升 2.新唐的博客 3.js中匿名函数的创建与调用方法分析 4.前端圣经 - <高程三> 5.深入理解变量 ...

  8. sql 日期对比

    来自这里

  9. 09-排序2 Insert or Merge （25 分）

    According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...

  10. hdu1016 Prime Ring Problem(DFS)

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...