Select does not support double click dbclick event

Select does not support double click dbclick event
XML/HTML CodeCopy content to clipboard
  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" > Option 1 </ option >     
  4. < option   value = "2" > Option 2 </ option >     
  5. < option   value = "3" > Option 3 </ option >     
  6. < option   value = "4" > Option 4 </ option >     
  7. < option   value = "5" > Option 5 </ option >     
  8. </ select >     
  9.   
  10. < div >     
  11. < span   id = "add"   style = "display:block; width:140px; cursor:pointer;" > Select and add to the right > > </ span >     
  12. < span   id = "addAll"   style = "display:block; width:140px; cursor:pointer;" > Add all to the right > > </ 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;" > < < Select and delete to the left </ span >     
  19. < span   id = "addAll1"   style = "display:block; width:170px; cursor:pointer;" > < < Select all and delete to the left </ span >     
  20. </ div >     
  21. </ div >   
JavaScript CodeCopy content to clipboard
  1. <script type= "text/javascript" >
  2.   
  3. //Application of multiple selection in drop-down box 9:57   
  4. $( function () {
  5. //Start adding the left to the right   
  6. $( "#add" ).click( function (){ //Add the selected item to the right   
  7. $option = $( "#select1 option:selected" );
  8. $option.appendTo( "#select2" );
  9. })
  10. $( "#addAll" ).click( function (){ //Add all to the right   
  11. $option = $( "#select1 option" );
  12. $option.appendTo( "#select2" );
  13. })
  14. $( "#select1" ).dbclick( function (){ //Double click to add to the right   
  15. $option = $( "#select1 option:selected" , this );
  16. $option.appendTo( "#select2" );
  17. })
  18. //Start adding the right side to the left side   
  19. $( "#add1" ).click( function (){ //Add the selected item to the left   
  20. $option = $( "#select2 option:selected" );
  21. $option.appendTo( "#select1" );
  22. })
  23. $( "#addAll1" ).click( function (){ //Add all to the left   
  24. $option = $( "#select2 option" );
  25. $option.appendTo( "#select1" );
  26. })
  27. $( "#select2" ).dbclick( function (){ //Double click to add to the left   
  28. $option = $( "option:selected" , this );
  29. $option.appendTo( "#select1" );
  30. })
  31. })
  32. </script>

<<:  Detailed explanation of the use of JavaScript functions

>>:  MySQL isolation level detailed explanation and examples

Recommend

Teach you 10 ways to center horizontally and vertically in CSS (summary)

A must-have for interviews, you will definitely u...

js to achieve simple image drag effect

This article shares the specific code of js to ac...

The difference and execution method of select count() and select count(1)

Count(*) or Count(1) or Count([column]) are perha...

Linux uses lsof command to check file opening status

Preface We all know that in Linux, "everythi...

js realizes the function of clicking to switch cards

This article example shares the specific code of ...

Detailed explanation of monitoring Jenkins process based on zabbix

1. Monitoring architecture diagram 2. Implementat...

How to deal with time zone issues in Docker

background When I was using Docker these two days...

How to fix the footer at the bottom of the page (multiple methods)

As a front-end Web engineer, you must have encoun...

Sample code for implementing image drawer effect with CSS3

As usual, let’s first post the picture effect: Th...

Sharing of experience on repairing MySQL innodb exceptions

A set of MySQL libraries for testing. The previou...

Interviewers often ask questions about React's life cycle

React Lifecycle Two pictures to help you understa...

Detailed explanation of Nginx timed log cutting

Preface By default, Nginx logs are written to a f...

In-depth discussion on auto-increment primary keys in MySQL

Table of contents Features Preservation strategy ...

Detailed explanation of how NGINX counts the website's PV, UV, and independent IP

Nginx: PV, UV, independent IP Everyone who makes ...

Use the more, less, and cat commands in Linux to view file contents

In Linux, the commands cat, more, and less can al...