首頁 > web前端 > js教程 > 基於jQuery實作下拉框_jquery

基於jQuery實作下拉框_jquery

WBOY
發布: 2016-05-16 16:30:32
原創
1299 人瀏覽過

專案中常會遇到下拉框,在扁平化和響應式佈局大行其道的今天,使用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選項>
       選擇>
      

           選取新增至右邊>>

           全部加至右邊>>
      

  

  

      
       選擇>
      

          

          
      

  


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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板