基于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')
        });
    }

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