基于jQuery实现下拉框_jquery

项目中经常会遇到下拉框，在扁平化和响应式布局大行其道的今天，使用jQuery来实现下拉框就十分的必要了，而且也会美观很多，这里就给大家推荐一段基于jQuery的下拉框代码。

jQuery代码：

复制代码 代码如下:

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

HTML代码：

复制代码 代码如下:

  

  

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

           选中添加到右边>>

           全部添加到右边>>
      

  

  

      
      
      

          

          
      

  

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