Implementieren Sie ein Dropdown-Feld basierend auf jQuery_jquery

Heutzutage stoßen wir in Projekten häufig auf Dropdown-Boxen, da flache und reaktionsfähige Layouts sehr beliebt sind. Die Verwendung von jQuery ist außerdem viel schöner. Hier ist ein Teil von jQuery-basiertem Drop-Down-Box-Code.

jQuery-Code:

Code kopieren Der Code lautet wie folgt:

         $(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); //Ausgewählte Option abrufen
                       $options.appendTo('#select2');               });
                  $('#select2').dblclick(function(){
              var $options = $("option:selected",this); //Ausgewählte Option abrufen
                        $options.appendTo('#select1');               });
         });



HTML-Code:





Code kopieren

Der Code lautet wie folgt:

  

  

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

           选中添加到右边>>

           全部添加到右边>>
      

  

  

      
      
      

           <<选中删除到左边

           <<全部删除到左边
      

  

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