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>
其中：${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
提交的时候要获取已选择的选项，可以使用下面的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
(完事) 若有不妥，欢迎留言，共同探讨.
