随着项目的进展，测试工程师在更多的浏览器中兼容性测试中，发现有些浏览器不支持option的触发事件，这就造成了先前一篇博文bootstrap 左右框多项选择示例
中左右选择框的失效，于是我就由原先的select-option结构 改成了 现在的 ul-li 结构，并写成了js插件的形式，方便以后调用和修改，并在多个浏览器测试中得到验证：
实现的页面如下：
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);