Home > Web Front-end > JS Tutorial > Implement drop-down box based on jQuery_jquery

Implement drop-down box based on jQuery_jquery

WBOY
Release: 2016-05-16 16:30:32
Original
1314 people have browsed it

We often encounter drop-down boxes in projects. Today, when flat and responsive layouts are popular, it is very necessary to use jQuery to implement drop-down boxes, and it will also be much more beautiful. Here is a piece of jQuery-based Drop down box code.

jQuery code:

Copy code The code is as follows:

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

HTML code:

Copy code The code is as follows:

  

  

      
      

           选中添加到右边>>

           全部添加到右边>>
      

  

  

      
      

           <<选中删除到左边

           <<全部删除到左边
      

  


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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template