左右选择框 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>

View Code

 

下面是调用插件的代码

$(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);