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

Convert psd cut image to div+css format

PSD to div css web page cutting example Step 1: F...

How to create components in React

Table of contents Preface Component Introduction ...

A Preliminary Study on Vue Unit Testing

Table of contents Preface Why introduce unit test...

Shorten the page rendering time to make the page run faster

How to shorten the page rendering time on the bro...

TypeScript enumeration basics and examples

Table of contents Preface What are enums in TypeS...

Ubuntu 19.04 installation tutorial (picture and text steps)

1. Preparation 1.1 Download and install VMware 15...

Several ways to use require/import keywords to import local images in v-for loop

Table of contents Problem Description Method 1 (b...

SQL implements LeetCode (180. Continuous numbers)

[LeetCode] 180. Consecutive Numbers Write a SQL q...

Design Story: The Security Guard Who Can't Remember License Plates

<br />In order to manage the vehicles enteri...

Introduction to the use of html area image hotspots with a list of related properties

The <area> tag is mainly used in image maps...

MySQL 5.7.30 Installation and Upgrade Issues Detailed Tutorial

wedge Because the MySQL version installed on the ...

The MySQL version is lower than the one that does not support two timestamp type values.

MySQL error: Error code: 1293 Incorrect table def...

Common scenarios and avoidance methods for index failure in MySQL

Preface I have read many similar articles before,...

How to change the database data storage directory in MySQL

Preface The default database file of the MySQL da...

How to generate mysql primary key id (self-increment, unique and irregular)

Table of contents 1. Use the uuid function to gen...