bootstrap 插件multiselect 左右选择框

首先看一下效果图：

第一步 ：引入对应的js

bootstrap.js、jquery.js、multiselect.min.js

这三个是必须要有的

jsp代码：

<div class="row">
                                <div class="col-xs-5">
                                    <label for="keepRenderingSort" class="control-label">已拥有</label>
                                    <select name="from[]" id="keepRenderingSort" class="form-control" size="10" multiple="multiple">
                                        <option value="1" data-position="1">Item 1</option>
                                        <option value="2" data-position="2">Item 2</option>
                                        <option value="3" data-position="3">Item 3</option>
                                        <option value="4" data-position="4">Item 4</option>
                                        <option value="5" data-position="5">Item 5</option>
                                        
                                        <option value="6" data-position="6">Item 6</option>
                                        <option value="7" data-position="7">Item 7</option>
                                        <option value="8" data-position="8">Item 8</option>
                                        <option value="9" data-position="9">Item 9</option>
                                        <option value="10" data-position="10">Item 10</option>
                                    </select>
                                </div>
                                
                                <div class="col-xs-2" style="margin-top: 50px;">
                                    <button type="button" id="keepRenderingSort_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
                                    <button type="button" id="keepRenderingSort_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
                                    <button type="button" id="keepRenderingSort_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
                                    <button type="button" id="keepRenderingSort_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
                                </div>
                                <label for="keepRenderingSort" class="control-label">未拥有</label>
                                <div class="col-xs-5">
                                    <select name="to[]" id="keepRenderingSort_to" class="form-control" size="10" multiple="multiple">
                                         
                                    </select>
                                </div>
                        </div>

 

 

<script type="text/javascript">
$(document).ready(function() {
    // make code pretty

    $('#keepRenderingSort').multiselect({
        keepRenderingSort: true
    });
    
});
</script>  

 

这里说一下，我这里的这个页面属于弹出层，所以在multiselect.min.js修改了获取图层的方式

原代码

$('#keepRenderingSort').multiselect({
        keepRenderingSort: true
    });

修改后

$('#payerIframe #keepRenderingSort').multiselect({
        keepRenderingSort: true
    });

如果是弹出层页面，不修改获取方式，代码找不页面，选项点击不会左右移动，在平层页面直接使用即可