欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

select不支持双击dbclick事件_HTML/Xhtml_网页制作

程序员文章站 2022-04-19 12:10:02
...
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">选项1option>
  4. option value="2">选项2option>
  5. option value="3">选项3option>
  6. option value="4">选项4option>
  7. option value="5">选项5option>
  8. select>
  9. div>
  10. span id="add" style="display:block; width:140px; cursor:pointer;">选中添加到右边>>span>
  11. span id="addAll" style="display:block; width:140px; cursor:pointer;">全部添加到右边>>span>
  12. div>div>
  13. div class="centent" style="width:200px; float:left; margin-right:20px;">
  14. select multiple="multiple" id="select2" style="width:150px; height:160px;">
  15. select>
  16. div>
  17. span id="add1" style="display:block; width:140px; cursor:pointer;">选中删除到左边span>
  18. span id="addAll1" style="display:block; width:170px; cursor:pointer;">全部选中删除到左边span>
  19. div>
  20. div>
JavaScript Code复制内容到剪贴板
  1. >
  2. //下拉框多选的应用 9:57
  3. $(function(){
  4. //开始把左边的添加到右边
  5. $("#add").click(function(){ //把选中的添加到右边
  6. $option = $("#select1 option:selected");
  7. $option.appendTo("#select2");
  8. })
  9. $("#addAll").click(function(){ //全部添加到右边
  10. $option = $("#select1 option");
  11. $option.appendTo("#select2");
  12. })
  13. $("#select1").dbclick(function(){ //双击添加到右边
  14. $option = $("#select1 option:selected",this);
  15. $option.appendTo("#select2");
  16. })
  17. //开始右边的添加到左边
  18. $("#add1").click(function(){ //把选中的添加到左边
  19. $option = $("#select2 option:selected");
  20. $option.appendTo("#select1");
  21. })
  22. $("#addAll1").click(function(){ //全部添加到左边
  23. $option = $("#select2 option");
  24. $option.appendTo("#select1");
  25. })
  26. $("#select2").dbclick(function(){ //双击添加到左边
  27. $option = $("option:selected",this);
  28. $option.appendTo("#select1");
  29. })
  30. })
相关标签: select 双击事件