Implement drop-down box based on jQuery_jquery

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');
              });
         });

HTML code:

Copy code The code is as follows:

  

  

      
           选项1
           选项2
           选项3
           选项4
           选项5
           选项6
           选项7
           选项8
      
      

           选中添加到右边>>

           全部添加到右边>>
      

  

  

      
      
      

           <<选中删除到左边

           <<全部删除到左边
      

  

是不是很简单？小伙伴们需要的话直接就可以拿到项目中使用了。