首页 > 代码库 > 左右选择框 js插件
左右选择框 js插件
随着项目的进展，测试工程师在更多的浏览器中兼容性测试中，发现有些浏览器不支持option的触发事件，这就造成了先前一篇博文bootstrap 左右框多项选择示例
中左右选择框的失效，于是我就由原先的select-option结构 改成了 现在的 ul-li 结构，并写成了js插件的形式，方便以后调用和修改，并在多个浏览器测试中得到验证：
实现的页面如下：
jsp页面的修改如下：
1 <div id="province_dchannel"> 2 <div class="panel panel-default"> 3 <!-- Default panel contents --> 4 <div class="panel-heading">选择省份</div> 5 <fieldset> 6 <table class="table table-bordered dchannel-table"> 7 <tbody> 8 <tr class="item-default"> 9 <td align="right">10 <div class="has-feedback">11 <label class="control-label sr-only" for="search_province_repo"></label>12 <input type="text" class="form-control search-for-select phone1" id="search_province_repo" placeholder="Search" forselect="sel_all_area" />13 <span class="glyphicon glyphicon-search form-control-feedback" style="height:40px;line-height:40px;margin-right:-10px;"></span>14 <div style="padding-top:8px;"> 15 <%-- <select id="sel_all_area" multiple="multiple" size="10" style="width:100%;height:222px;">16 <c:forEach items="${unselectedAreas}" var="area" varStatus="loop">17 <option value="${area.code}">${area.name}(${area.code})</option>18 </c:forEach>19 </select> --%>20 <ul id="sel_all_area" style="width:100%;height:222px;border-radius:0px;overflow-y: scroll;padding-left:10px;text-align:left;">21 <c:forEach items="${unselectedAreas}" var="area" varStatus="loop">22 <li class="proxy_li" data="${area.code}">${area.name}(${area.code})</li>23 </c:forEach>24 </ul>25 </div>26 </div>27 28 </td>29 <td style="width: 50px;" valign="middle">30 <div style="padding-top:38px;"> 31 <button type="button" class="btn btn-default btn-small gr" id="btn_select_all_area"><span class="glyphicon glyphicon-forward"></span></button>32 <button type="button" class="btn btn-default btn-small gr" id="btn_choose_selected_area"><span class="glyphicon glyphicon-chevron-right"></span></button>33 <button type="button" class="btn btn-default btn-small gr" id="btn_remove_selected_area"><span class="glyphicon glyphicon-chevron-left"></span></button>34 <button type="button" class="btn btn-default btn-small gr" id="btn_remove_all_area"><span class="glyphicon glyphicon-backward"></span></button>35 </div>36 </td>37 <td style="width: 45%;">38 <div class="has-feedback">39 <label class="control-label sr-only" for="search_province_select"></label>40 <input type="text" class="form-control search-for-select phone1" id="search_province_select" placeholder="Search" forselect="sel_selected_areas">41 <span class="glyphicon glyphicon-search form-control-feedback" style="height:40px;line-height:40px;margin-right:-10px;"></span></input>42 <div style="padding-top:8px;">43 <%-- <select id="sel_selected_areas" multiple="multiple" size="10" style="width:100%;height:222px;">44 <c:forEach items="${selectedAreas}" var="area" varStatus="loop">45 <option value="${area.code}">${area.name}(${area.code})</option>46 </c:forEach>47 </select> --%>48 <ul id="sel_selected_areas" style="width:100%;height:222px;border-radius:0px;overflow-y: scroll;padding-left:10px;text-align:left;">49 <c:forEach items="${selectedAreas}" var="area" varStatus="loop">50 <li class="proxy_li" data="${area.code}">${area.name}(${area.code})</li>51 </c:forEach>52 </ul>53 </div>54 </div>55 </td>56 </tr>57 </tbody>58 </table>59 </fieldset>60 </div>
下面是调用插件的代码
$(function () { $.selectBox({ ulFrom: ‘sel_all_area‘, ulTo: ‘sel_selected_areas‘, selectAll: ‘btn_select_all_area‘, selectSelected: ‘btn_choose_selected_area‘, removeAll: ‘btn_remove_all_area‘, removeSelected: ‘btn_remove_selected_area‘, selectedClass: ‘selected‘, quickQuery: ‘search-for-select‘ }); });
最后直接贴出缩写插件的代码：
/** * 智能左右选择框插件 * @param sel_all_from 资源选择框 * @param sel_all_to 目标选择框 * @remark 由于select-option组合造成某些浏览器不支持option事件，所以此插件采用ul-li组合来模拟完成选择</br>经测试，支持firefox,chrome,ie6+,360,猎豹等主流浏览器 * @date 2015-1-13 * @author wjq1255 * */(function ($) { $.selectBox = function (options) { var defaults = { ulFrom: ‘ul_all_from‘, ulTo: ‘ul_all_to‘, selectAll: ‘btn_select_all‘, selectSelected: ‘btn_select_selected‘, removeAll: ‘btn_remove_all‘, removeSelected: ‘btn_remove_selected‘, selectedClass: ‘selected‘, quickQuery:‘‘ }; //init var option = $.extend(defaults, options); var j_all_from = $("#"+option.ulFrom), j_selected_to = $("#"+option.ulTo); var b_select_all = $("#"+option.selectAll), b_select_selected = $("#"+option.selectSelected), b_remove_all = $("#"+option.removeAll), b_remove_selected = $("#"+option.removeSelected); //快速搜索选择匹配 var quickQuery = function(){ var b_quick_query = $("input."+option.quickQuery); b_quick_query.keyup(function(){ var select = $(this).attr("forselect"); var keyvalue = http://www.mamicode.com/$(this).val(); $("#" + select).find("li").each(function(){ if($(this).html().indexOf(keyvalue) >= 0 || !keyvalue){ $(this).show(); }else{ $(this).hide(); } }); return false; }); } if(option.quickQuery != ‘‘){//设定快速搜索选择匹配 quickQuery(); } b_select_all.click(function(){//全选按钮 j_all_from.find("li").each(function(){ $(this).appendTo(j_selected_to); }); return false; }); b_select_selected.click(function(){//单选按钮 j_all_from.find("li.selected").each(function(){ $(this).appendTo(j_selected_to); }); return false; }); b_remove_selected.click(function(){//单选返回按钮 j_selected_to.find("li.selected").each(function(){ $(this).appendTo(j_all_from); }); return false; }); b_remove_all.click(function(){//全选返回按钮 j_selected_to.find("li").each(function(){ $(this).appendTo(j_all_from); }); return false; }); j_all_from.find("li").on("click", function(event){ event = event || window.event; //单击选中,按住Ctrl键实现多选，否则，单选 if(event.ctrlKey){ $(this).toggleClass("selected"); }else{ $(this).toggleClass("selected").siblings("li.selected").removeClass("selected"); } return false; }); j_selected_to.find("li").on("click", function(event){ event = event || window.event; //单击选中,按住Ctrl键实现多选，否则，单选 if(event.ctrlKey){ $(this).toggleClass("selected"); }else{ $(this).toggleClass("selected").siblings("li.selected").removeClass("selected"); } return false; }); //双击选择选项 j_all_from.find("li").on("dblclick", function(){ $(this).addClass("selected"); if ($(this).parent("ul").is(j_all_from)) { b_select_selected.click(); } else { b_remove_selected.click(); } return false; }); //双击返回选项 j_selected_to.find("li").on("dblclick", function(){ $(this).addClass("selected"); if ($(this).parent("ul").is(j_selected_to)) { b_select_selected.click(); } else { b_remove_selected.click(); } return false; }); };})(jQuery);
左右选择框 js插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。