基于jquery和bootstrap的下拉框左右选择功能

实现如图选择的功能，可以用基于bootstrap的样式，结合jquery事件：

<div class="row">
     <div class="col-xs-3">
          <select name="from" id="select1" class="form-control" size="10">
                 <option value="1">Item 1</option>
                 <option value="2">Item 2</option>
                 <option value="3">Item 3</option>
                 <option value="4">Item 4</option>
                 <option value="5">Item 5</option>
           </select>
      </div>
                                
      <div class="col-xs-2">
           <button type="button" id="rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
           <button type="button" id="rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
           <button type="button" id="leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
           <button type="button" id="leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
      </div>
                                
      <div class="col-xs-3">
           <select name="to" id="select2" class="form-control" size="10"></select>
      </div>
 </div>

function select_init() {
        //将左边所有选项添加到右边
        $(\'#rightAll\').click(function() {
            $(\'#select1 option\').appendTo(\'#select2\');
        })
        //将左边选中的选项添加到右边
        $(\'#rightSelected\').click(function() {
            $(\'#select1 option:selected\').appendTo(\'#select2\');
        })
        
        //将右边所有选项添加到左边
        $(\'#leftAll\').click(function() {
            console.log("点击右边")
            $(\'#select2 option\').appendTo(\'#select1\');
        })
        //将左边选中的选项添加到右边
        $(\'#leftSelected\').click(function() {
            $(\'#select2 option:selected\').appendTo(\'#select1\');
        })
        
        //双击左边选项直接添加到右边的效果
        $(\'#select1\').dblclick(function(event) {  
            $("option:selected",this).appendTo(\'#select2\')  
        });
        //双击右边选项直接添加到左边的效果
        $(\'#select2\').dblclick(function(event) {  
            $("option:selected",this).appendTo(\'#select1\')  
        });
    }

这样就可以简单实现想要的效果啦！