基于jQuery實現(xiàn)下拉框

2019-11-20 13:53:24

字體：大中小

供稿：網(wǎng)友

項目中經(jīng)常會遇到下拉框，在扁平化和響應(yīng)式布局大行其道的今天，使用jQuery來實現(xiàn)下拉框就十分的必要了，而且也會美觀很多，這里就給大家推薦一段基于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代碼：

復(fù)制代碼代碼如下:

   <div style="width: 250px"> 
   <div class="content" style="float: left"> 
       <select multiple id="select1" style="width: 100px;height: 160px;"> 
           <option value="1">選項1</option> 
           <option value="2">選項2</option> 
           <option value="3">選項3</option> 
           <option value="4">選項4</option> 
           <option value="5">選項5</option> 
           <option value="6">選項6</option> 
           <option value="7">選項7</option> 
           <option value="8">選項8</option> 
       </select> 
       <div> 
           <span id="add">選中添加到右邊>></span><br> 
           <span id="add_all">全部添加到右邊>></span> 
       </div> 
   </div> 
   <div style="float: right;"> 
       <select multiple id="select2" style="width: 100px;height: 160px;"> 
       </select> 
       <div> 
           <span id="remove"><<選中刪除到左邊</span><br> 
           <span id="remove_all"><<全部刪除到左邊</span> 
       </div> 
   </div> 
</div>