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

 

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

posted @ 2014-11-12 11:58  wjq1255  阅读(3221)  评论(0)  编辑  收藏  举报