左右选择框 js插件

随着项目的进展，测试工程师在更多的浏览器中兼容性测试中，发现有些浏览器不支持option的触发事件，这就造成了先前一篇博文bootstrap 左右框多项选择示例

中左右选择框的失效，于是我就由原先的select-option结构 改成了 现在的 ul-li 结构，并写成了js插件的形式，方便以后调用和修改，并在多个浏览器测试中得到验证：

实现的页面如下：

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

jsp页面的修改如下：

                 <div id="province_dchannel">
                      <div class="panel panel-default">
                         <!-- Default panel contents -->
                         <div class="panel-heading">选择省份</div>
                         <fieldset>
                             <table class="table table-bordered dchannel-table">
                                 <tbody>
                                     <tr class="item-default">
                                         <td align="right">
                                         <div class="has-feedback">
                                             <label class="control-label sr-only" for="search_province_repo"></label>
                                             <input type="text" class="form-control search-for-select phone1" id="search_province_repo" placeholder="Search" forselect="sel_all_area" />
                                             <span class="glyphicon glyphicon-search form-control-feedback" style="height:40px;line-height:40px;margin-right:-10px;"></span>
                                             <div style="padding-top:8px;">
                                                 <%-- <select id="sel_all_area" multiple="multiple" size="10" style="width:100%;height:222px;">
                                                        <c:forEach items="${unselectedAreas}" var="area" varStatus="loop">
                                                              <option value="${area.code}">${area.name}(${area.code})</option>
                                                        </c:forEach>
                                                  </select> --%>
                                                  <ul id="sel_all_area" style="width:100%;height:222px;border-radius:0px;overflow-y: scroll;padding-left:10px;text-align:left;">
                                                        <c:forEach items="${unselectedAreas}" var="area" varStatus="loop">
                                                              <li class="proxy_li" data="${area.code}">${area.name}(${area.code})</li>
                                                        </c:forEach>
                                                  </ul>
                                            </div>
                                         </div>

                                         </td>
                                         <td style="width: 50px;" valign="middle">
                                           <div style="padding-top:38px;">
                                             <button type="button" class="btn btn-default btn-small gr" id="btn_select_all_area"><span class="glyphicon glyphicon-forward"></span></button>
                                                <button type="button" class="btn btn-default btn-small gr" id="btn_choose_selected_area"><span class="glyphicon glyphicon-chevron-right"></span></button>
                                                <button type="button" class="btn btn-default btn-small gr" id="btn_remove_selected_area"><span class="glyphicon glyphicon-chevron-left"></span></button>
                                                <button type="button" class="btn btn-default btn-small gr" id="btn_remove_all_area"><span class="glyphicon glyphicon-backward"></span></button>
                                           </div>
                                         </td>
                                         <td style="width: 45%;">
                                         <div class="has-feedback">
                                             <label class="control-label sr-only" for="search_province_select"></label>
                                             <input type="text" class="form-control search-for-select phone1" id="search_province_select" placeholder="Search" forselect="sel_selected_areas">
                                             <span class="glyphicon glyphicon-search form-control-feedback" style="height:40px;line-height:40px;margin-right:-10px;"></span></input>
                                             <div style="padding-top:8px;">
                                                 <%-- <select id="sel_selected_areas"  multiple="multiple" size="10" style="width:100%;height:222px;">
                                                          <c:forEach items="${selectedAreas}" var="area" varStatus="loop">
                                                              <option value="${area.code}">${area.name}(${area.code})</option>
                                                        </c:forEach>
                                                    </select> --%>
                                                    <ul id="sel_selected_areas"  style="width:100%;height:222px;border-radius:0px;overflow-y: scroll;padding-left:10px;text-align:left;">
                                                          <c:forEach items="${selectedAreas}" var="area" varStatus="loop">
                                                              <li class="proxy_li" data="${area.code}">${area.name}(${area.code})</li>
                                                        </c:forEach>
                                                    </ul>
                                             </div>
                                         </div>
                                       </td>
                                     </tr>
                                 </tbody>
                             </table>
                         </fieldset>
                     </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 = $(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);