bootstrap 左右框多项选择示例

bootstrap 左右选择框，左边框是未选项，右边框是已选择项，提供单选，全选按钮，以及取消已选项，如图示：

jsp中页面代码：

 1 <div class="panel-heading">选择省份</div>

 2 <fieldset>

 3     <table class="table table-bordered dchannel-table">

 4       <tbody>

 5     <tr class="item-default">

 6         <td align="right" style="width: 50%;">

 7             <select id="sel_all_area" multiple="multiple" size="10" style="width:100%;">

 8                       <c:forEach items="${unselectedAreas}" var="area" varStatus="loop">

 9                         <option value="${area.code}">${area.name}(${area.code})</option>

10                       </c:forEach>

11                 </select>

12         </td>

13         <td style="width: 50px;" valign="middle">

14             <button type="button" class="btn btn-default btn-small" id="btn_select_all_area"><span class="glyphicon glyphicon-forward"></span></button>

15             <button type="button" class="btn btn-default btn-small" id="btn_choose_selected_area"><span class="glyphicon glyphicon-chevron-right"></span></button>

16             <button type="button" class="btn btn-default btn-small" id="btn_remove_selected_area"><span class="glyphicon glyphicon-chevron-left"></span></button>

17             <button type="button" class="btn btn-default btn-small" id="btn_remove_all_area"><span class="glyphicon glyphicon-backward"></span></button>

18         </td>

19         <td style="width: 50%;">

20             <select id="sel_selected_areas"  multiple="multiple" size="10" style="width:100%;">

21                   <c:forEach items="${selectedAreas}" var="area" varStatus="loop">

22                         <option value="${area.code}">${area.name}(${area.code})</option>

23                       </c:forEach>

24             </select>

25         </td>

26     </tr>

27       </tbody>

28     </table>

29 </fieldset>

View Code

其中：${unselectedAreas}是从服务端获取的未选择的选项内容，${selectedAreas}为从服务端获取的已选择的选项，在列表中展示出来。

jquery 代码：

 1 //处理地区的选择

 2     var j_all_area = $("#sel_all_area"), j_selected_areas = $("#sel_selected_areas");

 3     $("#btn_select_all_area").click(function(){

 4         j_all_area.find("option").each(function(){

 5             $(this).appendTo(j_selected_areas);

 6         });

 7         return false;

 8     });

 9     $("#btn_choose_selected_area").click(function(){

10         

11         j_all_area.find("option:selected").each(function(){

12             $(this).appendTo(j_selected_areas);

13         });

14         return false;

15     });

16     $("#btn_remove_selected_area").click(function(){

17         j_selected_areas.find("option:selected").each(function(){

18             $(this).appendTo(j_all_area);

19         });

20         return false;

21     });

22     $("#btn_remove_all_area").click(function(){

23         j_selected_areas.find("option").each(function(){

24             $(this).appendTo(j_all_area);

25         });

26         j_selected_areas.find("option").each(function(){

27             $(this).appendTo(j_all_area);

28         });

29         return false;

30     });

31     j_all_area.find("option").on("dblclick", function(){

32         if ($(this).closest("select").is(j_all_area)) {

33             $("#btn_choose_selected_area").click();

34         }

35         else {

36             $("#btn_remove_selected_area").click();

37         }

38         

39         return false;

40     });

41     j_selected_areas.find("option").on("dblclick", function(){

42         if ($(this).closest("select").is(j_all_area)) {

43             $("#btn_choose_selected_area").click();

44         }

45         else {

46             $("#btn_remove_selected_area").click();

47         }

48         

49         return false;

50     });

51     

View Code

提交的时候要获取已选择的选项，可以使用下面的jQuery代码：

1  var selectedAreaArray = [];

2  $("#sel_selected_areas option").each(function(i){

3      selectedAreaArray[i] = $(this).val();

4 });

最后记得要引用相关的js和css文件:

bootstrap.css

jQuery.js

bootstrap.js

 

(完事) 若有不妥，欢迎留言，共同探讨.