首先看一下效果圖：
第一步 ：引入對應的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
});
如果是彈出層頁面，不修改獲取方式，代碼找不頁面，選項點擊不會左右移動，在平層頁面直接使用即可
