Implémenter une liste déroulante basée sur jQuery_jquery

Nous rencontrons souvent des listes déroulantes dans les projets. Aujourd'hui, lorsque les mises en page plates et réactives sont populaires, il est très nécessaire d'utiliser jQuery pour implémenter des listes déroulantes, et ce sera aussi beaucoup plus beau. de code de liste déroulante basé sur jQuery.

Code jQuery :

Copier le code Le code est le suivant :

         $(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 //Obtenir l'option sélectionnée
);                        $options.appendTo('#select2');
              } );
                  $('#select2').dblclick(function(){
              var $options = $("option:selected",this //Obtenir l'option sélectionnée
);                        $options.appendTo('#select1');
              } );
         } );

Code HTML :

Copier le code Le code est le suivant :

  

  

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

           选中添加到右边>>

           全部添加到右边>>
      

  

  

      
      
      

           <<选中删除到左边

           <<全部删除到左边
      

  

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