首页 > 代码库 > bootstrap 左右框多项选择示例
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
(完事) 若有不妥，欢迎留言，共同探讨.
bootstrap 左右框多项选择示例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。