Heim > Web-Frontend > js-Tutorial > Implementieren Sie ein Dropdown-Feld basierend auf jQuery_jquery

Implementieren Sie ein Dropdown-Feld basierend auf jQuery_jquery

WBOY
Freigeben: 2016-05-16 16:30:32
Original
1314 Leute haben es durchsucht

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:


  

  

      
      

           选中添加到右边>>

           全部添加到右边>>
      

  

  

      
      

           <<选中删除到左边

           <<全部删除到左边
      

  


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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage