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

HTML+CSS to create a top navigation bar menu

Navigation bar creation: Technical requirements: ...

A brief analysis of how MySQL implements transaction isolation

Table of contents 1. Introduction 2. RC and RR is...

JavaScript implements click to change the image shape (transform application)

JavaScript clicks to change the shape of the pict...

Introduction to cloud native technology kubernetes (K8S)

Table of contents 01 What is Kubernetes? 02 The d...

Example code for implementing transparent gradient effects with CSS

The title images on Zhihu Discovery columns are g...

JavaScript navigator.userAgent obtains browser information case explanation

The browser is probably the most familiar tool fo...

Detailed explanation of the Sidecar mode in Docker Compose

Table of contents What is Docker Compose Requirem...

Summary of MySQL database and table sharding

During project development, our database data is ...

Clever use of webkit-box-reflect to achieve various dynamic effects (summary)

In an article a long time ago, I talked about the...

Detailed tutorial on installing mysql under Linux

1. Shut down the mysql service # service mysqld s...

Correct steps to install Nginx in Linux

Preface If you are like me, as a hard-working Jav...