Laksanakan kotak lungsur berdasarkan jQuery

Laksanakan kotak lungsur berdasarkan jQuery_jquery

WBOY

Lepaskan： 2016-05-16 16:30:32

asal

1315 orang telah melayarinya

Kami sering menemui kotak drop-down dalam projek Hari ini, apabila susun atur rata dan responsif adalah sangat perlu untuk menggunakan jQuery untuk melaksanakan kotak drop-down, dan ia juga akan menjadi lebih cantik kod kotak Jatuh turun berasaskan jQuery.

Kod jQuery:

Salin kod Kod adalah seperti berikut:

         $(function(){ 

                 $('#add').klik(function(){ 

                var $options = $('#select1 option:selected');
                       $options.appendTo("#select2");
              }); 

                 $('#remove').klik(function(){ 

                var $options = $('#select2 option:selected');
                      $options.appendTo("#select1");
              }); 

                 $('#add_all').klik(function(){ 

                var $options = $('#select1 option');
                       $options.appendTo("#select2");
              }); 

                 $('#remove_all').klik(function(){ 

                var $options = $('#select2 option');
                      $options.appendTo("#select1");
              }); 

                 $('#select1').dblclick(function(){ 

              var $options = $("option:selected",this); //Dapatkan pilihan yang dipilih 

                       $options.appendTo('#select2');
              }); 

                  $('#select2').dblclick(function(){ 

              var $options = $("option:selected",this); //Dapatkan pilihan yang dipilih 

                        $options.appendTo('#select1');
              }); 

         }); 

Kod HTML: 

Salin kod

Kod adalah seperti berikut:

 
           选项1 

           选项2 

           选项3 

           选项4 

           选项5 

           选项6 

           选项7 

           选项8 

           选中添加到右边>>
 
           全部添加到右边>> 

           <<选中删除到左边
 
           <<全部删除到左边

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