左右选择框 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);
左右选择框 js插件的更多相关文章
- jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
- [jQueryUI] – Chosen：select下拉选择框美化插件及问题
Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
- 基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- 使select文本框可编辑可选择（jQuery插件）
最近做项目中用到了这个插件,正好分享下. 1. 需要用的js包点击下载,在项目中引入该js. <script src="${pageContext.request.contextPa ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- 前端插件之Bootstrap Switch 选择框开关控制
简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...
- 使用bootstrap的JS插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- jQuery插件——下拉选择框
其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...
- Highchar.js插件提示框千分位显示为空格而不是逗号 --（2018 08/06-08/12周总结）
1.Oracle在已经存在主键的表中插入复合主键的SQL语句 如已有一个表test_key,其中a1列为主键. CREATE TABLE TEST_KEY( A1 VARCHAR2(3) NOT NU ...
随机推荐
- python 正則表達式推断邮箱格式是否正确
import re def validateEmail(email): if len(email) > 7: if re.match("^.+\\@(\\[?) ...
- 贝塞尔曲线与CAShapeLayer的关系以及Stroke动画
1.贝塞尔曲线与CAShapeLayer的关系 1.1CAShapeLayer须要一个形状才干生效,贝塞尔曲线能够创建基于矢量的路径.进而能够给CAShapeLayer提供路径,路径会闭环. ...
- 1. lvs+keepalived 高可用群集
一. keepalived 工具介绍 1.专为lvs 和HA 设计的一款健康检查工具 2.支持故障自动切换 3.支持节点健康状态检查 二. keepalived 实现原理剖析 keepalived ...
- 线性同余方程模板( A+C*x=B(mod D) )
void extendgcd(long long a,long long b,long long &d,long long &x,long long &y) { ){d=a;x ...
- poj2075
Tangled in Cables Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 6348 Accepted: 2505 ...
- 在fc6上搭tftpd
公司的开发环境依然停留在fc6上,,,,对..很旧,旧到想死. 我在没有进一步熟悉ubuntu的基础上,为了保持ABI一致. 只能依旧在FC6 上开发. 可是现在发现开发完成,我要在fc6上文件到wi ...
- iOS9 3D Touch使用
http://www.cnblogs.com/zhanglinfeng/p/5133939.html
- 【题解】P2161[SHOI2009]会场预约(set)
[题解][P2161 SHOI2009]会场预约 题目很像[[题解]APIO2009]会议中心 \(set\)大法好啊! 然后我们有个小\(trick\)(炒鸡帅),就是如何优雅地判断线段交? str ...
- Django 之 ModelForm 组件
Django的model form组件 扩展:Django 之Form组件 首先我们要知道 Model 和 Form 分别时干什么的 Model 生成表数据 Form 对表单.字段进行校验 Dja ...
- Android Studio 1.1 使用介绍及导入 jar 包和第三方依赖库
导入 jar 包 导入 jar 包的方式非常简单,就是在项目中的 libs 中放入你需要导入的 jar 包,然后右键你的 jar 文件,选择“add as a library”即可在你的项目中使用这个 ...