站内搜索

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

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>
  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">
  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>