基於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選項>
       選擇>
      

           選取新增至右邊>>

           全部加至右邊>>
      

  

  

      
       選擇>
      

          

          
      

  

是不是很簡單？小夥伴們需要的話直接就可以拿到專案中使用了。