Maison > interface Web > js tutoriel > Implémenter une liste déroulante basée sur jQuery_jquery

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

WBOY
Libérer: 2016-05-16 16:30:32
original
1313 Les gens l'ont consulté

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 :

  

  

      
          
          
          
          
          
          
          
          
      

      

           选中添加到右边>>

           全部添加到右边>>
      

  

  

      
      

      

           <<选中删除到左边

           <<全部删除到左边
      

  


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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal