Implement drop-down box based on jQuery

Implement drop-down box based on jQuery_jquery

WBOY

Release： 2016-05-16 16:30:32

Original

1266 people have browsed it

We often encounter drop-down boxes in projects. Today, when flat and responsive layouts are popular, it is very necessary to use jQuery to implement drop-down boxes, and it will also be much more beautiful. Here is a piece of jQuery-based Drop down box code.

jQuery code:

Copy code The code is as follows:

         $(function(){ 

                 $('#add').click(function(){ 

                var $options = $('#select1 option:selected'); 

                       $options.appendTo("#select2"); 

              }); 

                 $('#remove').click(function(){ 

                var $options = $('#select2 option:selected'); 

                      $options.appendTo("#select1"); 

              }); 

                 $('#add_all').click(function(){ 

                var $options = $('#select1 option'); 

                       $options.appendTo("#select2"); 

              }); 

                 $('#remove_all').click(function(){ 

                var $options = $('#select2 option'); 

                      $options.appendTo("#select1"); 

              }); 

                 $('#select1').dblclick(function(){ 

              var $options = $("option:selected",this); //Get the selected option 

                       $options.appendTo('#select2'); 

              }); 

                  $('#select2').dblclick(function(){ 

              var $options = $("option:selected",this); //Get the selected option 

                       $options.appendTo('#select1'); 

              }); 

         });