bootstrap 左右框多项选择示例

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

aaarticlea/png;base64,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" alt="" width="463" height="136" />

jsp中页面代码：

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

 <fieldset>

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

       <tbody>

     <tr class="item-default">

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

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

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

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

                       </c:forEach>

                 </select>

         </td>

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

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

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

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

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

         </td>

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

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

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

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

                       </c:forEach>

             </select>

         </td>

     </tr>

       </tbody>

     </table>

 </fieldset>

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

jquery 代码：

 //处理地区的选择

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

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

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

             $(this).appendTo(j_selected_areas);

         });

         return false;

     });

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

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

             $(this).appendTo(j_selected_areas);

         });

         return false;

     });

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

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

             $(this).appendTo(j_all_area);

         });

         return false;

     });

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

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

             $(this).appendTo(j_all_area);

         });

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

             $(this).appendTo(j_all_area);

         });

         return false;

     });

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

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

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

         }

         else {

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

         }

         return false;

     });

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

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

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

         }

         else {

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

         }

         return false;

     });

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

  var selectedAreaArray = [];

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

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

 });

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

bootstrap.css

jQuery.js

bootstrap.js

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

巴特西

bootstrap 左右框多项选择示例

最新文章

热门文章