首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

select不支持双击dbclick事件

所属分类： 网页制作 / HTML/Xhtml 阅读数： 705
收藏 0 赞 0 分享
XML/HTML Code复制内容到剪贴板
  1. <div class="centent" style="width:200px; float:left; margin-right:20px;">    
  2. <select multiple="multiple" id="select1" style="width:150px; height:160px;">    
  3. <option value="1">选项1</option>    
  4. <option value="2">选项2</option>    
  5. <option value="3">选项3</option>    
  6. <option value="4">选项4</option>    
  7. <option value="5">选项5</option>    
  8. </select>    
  9.   
  10. <div>    
  11. <span id="add" style="display:block; width:140px; cursor:pointer;">选中添加到右边>></span>    
  12. <span id="addAll" style="display:block; width:140px; cursor:pointer;">全部添加到右边>></span>    
  13. </div></div>    
  14. <div class="centent" style="width:200px; float:left; margin-right:20px;">    
  15. <select multiple="multiple" id="select2" style="width:150px; height:160px;">    
  16. </select>    
  17. <div>    
  18. <span id="add1" style="display:block; width:140px; cursor:pointer;"><<选中删除到左边</span>    
  19. <span id="addAll1" style="display:block; width:170px; cursor:pointer;"><<全部选中删除到左边</span>    
  20. </div>    
  21. </div>  
JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript">    
  2.   
  3. //下拉框多选的应用 9：57    
  4. $(function(){    
  5. //开始把左边的添加到右边    
  6. $("#add").click(function(){ //把选中的添加到右边    
  7. $option = $("#select1 option:selected");    
  8. $option.appendTo("#select2");    
  9. })    
  10. $("#addAll").click(function(){ //全部添加到右边    
  11. $option = $("#select1 option");    
  12. $option.appendTo("#select2");    
  13. })    
  14. $("#select1").dbclick(function(){ //双击添加到右边    
  15. $option = $("#select1 option:selected",this);    
  16. $option.appendTo("#select2");    
  17. })    
  18. //开始右边的添加到左边    
  19. $("#add1").click(function(){ //把选中的添加到左边    
  20. $option = $("#select2 option:selected");    
  21. $option.appendTo("#select1");    
  22. })    
  23. $("#addAll1").click(function(){ //全部添加到左边    
  24. $option = $("#select2 option");    
  25. $option.appendTo("#select1");    
  26. })    
  27. $("#select2").dbclick(function(){ //双击添加到左边    
  28. $option = $("option:selected",this);    
  29. $option.appendTo("#select1");    
  30. })    
  31. })    
  32. </script>
更多精彩内容其他人还在看

超链接的宽度和高度直接设置不起作用的解决方法

这篇文章主要介绍了超链接的宽度和高度直接设置不起作用的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

html下拉菜单提交后保留选中值而不返回默认值

这篇文章主要介绍了html下拉菜单提交后如何保留选中值而不返回默认值，方法虽简单，但比较实用，需要的朋友可以参考下
收藏 0 赞 0 分享

html用style添加属性示例

这篇文章主要介绍了html用style添加属性的写法，比较实用，有需要的朋友可以参考下
收藏 0 赞 0 分享

HTML元素设置焦点的方法

HTML元素设置焦点，大都是采用js的focus方法来进行设置，下面有个示例，大家可以参考下
收藏 0 赞 0 分享

html用title属性实现鼠标悬停显示文字

实现鼠标悬停显示文字，html中使用title属性就可实现显示文字的效果，这个属性还是比较实用的，需要的朋友可以参考下
收藏 0 赞 0 分享

html 用超链接打开新窗口其可控制窗口属性

这篇文章主要介绍了html如何用超链接打开新窗口其可控制窗口属性，主要使用到js的window.open方法，感兴趣的朋友可以看看哦
收藏 0 赞 0 分享

html 可输入下拉菜单的实现方法

可输入下拉菜单，不可思议是不是， 本例通过一些方法实现这个不可能的事情，感兴趣的朋友可以参考下
收藏 0 赞 0 分享

a标签href属性与onclick事件使用实例

a标签主要用来实现页面跳转，可以通过href属性实现，也可以在onclick事件里实现，下面为大家简要介绍下其具体的使用
收藏 0 赞 0 分享

HTML cellpadding与cellspacing属性图文详解

这篇文章主要介绍了HTML cellpadding与cellspacing属性，有个演示图，相信大家看过之后就知道了，需要的朋友可以参考下
收藏 0 赞 0 分享

input输入框中的光标大小显示不一致的解决方法

chrome浏览器对光标高度的设置原则为，当没有内容的时候光标的高度=input的line-height的值，当有内容时，光标从input的顶端到文字的底部
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22