jQuery双向列表选择器select版


Posted in Javascript onNovember 01, 2016

在上篇文章给大家介绍了div模拟版链接:https://3water.com/article/96211.htm,如果大家感兴趣可以参考下。

jQuery双向列表选择器select版

这个是select版的,若想美化某些样式是不支持得,可以用div模拟版的,功能基本实现能用了,需要其他功能自己加上。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>双向列表选择器select版</title>
<script type="text/javascript" src="../public/jquery-1.8.2.js"></script>
<script type="text/javascript">
/**
* two_way_list_selector.js - v1.0.0 (2016/7/26)
*
* Allows you to easily page layout!
* by tie. qq:2185987263
*
* Copyright (C) 2016, tie.
* All rights reserved.
*
**/
var two_way_list_selector=function(o){
var obj=o;
var btn_a=o.find(".btn_a");
var btn_b=o.find(".btn_b");
var btn_c=o.find(".btn_remove_all");
var btn_d=o.find(".btn_add_all");
var select_a=o.find(".select_a");
var select_b=o.find(".select_b");
//进行排序
var option_sort=function(o){
o.html(o.find("option").toArray().sort(function(a, b){
return parseInt($(a).attr("data-index")) - parseInt($(b).attr("data-index"));
}));
obj.find("option").unbind("dblclick").dblclick(function(){
_dblclick($(this));
});
}
//在列表中双击时
var _dblclick=function(o){
var flag = o.parent().attr('class');
var a ;
if(flag == "select_a"){
a = o.clone(true);
select_b.append(a);
o.remove();
option_sort(select_b);
} else {
a = o.clone(true);
select_a.append(a);
o.remove();
option_sort(select_a);
}
}
//选项双击时
obj.find("option").dblclick(function(){
_dblclick($(this));
});
//加入选中
btn_a.click(function(){
var a = select_a.find("option:selected").clone(true);
if(a.size() == 0){
return false;
}
select_b.append(a);
select_a.find("option:selected").remove();
option_sort(select_b);
});
//删除选中
btn_b.click(function(){
var a = select_b.find("option:selected").clone(true);
if(a.size() == 0){
return false;
}
select_a.append(a);
select_b.find("option:selected").remove();
option_sort(select_a);
});
//删除全部
btn_c.click(function(){
select_a.append(select_b.find("option"));
option_sort(select_a);
});
//添加全部
btn_d.click(function(){
select_b.append(select_a.find("option"));
option_sort(select_b);
});
}
//页面加载完毕后
$(document).ready(function(e) {
two_way_list_selector($("#two_way_list_selector_a"));
two_way_list_selector($("#two_way_list_selector_b"));
});
</script>
<style type="text/css">
@charset "utf-8";
.two_way_list_selector {
width: 100%;
height: 250px;
}
.two_way_list_selector .select_l, .two_way_list_selector .select_r {
width: 40%;
height: 250px;
float: left;
border: 1px solid #CCC;
}
.two_way_list_selector .select_l .option {
height: 29px;
line-height: 29px;
border-bottom: 1px solid #ddd;
text-indent:10px;
}
.two_way_list_selector .select_l select, .two_way_list_selector .select_r select {
width: 100%;
height: 220px;
border: none;
outline: none;
}
.two_way_list_selector .select_r select {
height: 250px;
}
.two_way_list_selector .select_l select:hover, .two_way_list_selector .select_r select:hover {
border: none;
box-shadow: none;
}
.two_way_list_selector .select_l select option, .two_way_list_selector .select_r select option {
padding: 10px;
border-bottom: 1px solid #ddd;
}
.two_way_list_selector .select_l select option:last-child, .two_way_list_selector .select_r select option:last-child {
border-bottom: none;
}
.two_way_list_selector .select_btn {
width: 10%;
height: 250px;
float: left;
display: table;
text-align: center;
}
.two_way_list_selector .select_btn div {
height: 250px;
display: table-cell;
vertical-align: middle;
}
.two_way_list_selector .select_btn div input {
width: 90%;
margin: 1px;
text-align: center;
font-weight: 100;
color: #999;
}
</style>
</head>
<body>
<div id="two_way_list_selector_a" class="two_way_list_selector margin_top_10">
<div class="select_l">
<div class="option">名称</div>
<select size="5" multiple class="select_a">
<option value="1" data-index="0">1</option>
<option value="2" data-index="1">2</option>
<option value="3" data-index="2">3</option>
<option value="4" data-index="3">4</option>
<option value="5" data-index="4">5</option>
<option value="6" data-index="5">6</option>
<option value="7" data-index="6">7</option>
</select>
</div>
<div class="select_btn">
<div>
<input type="button" value=">" class="button btn_a">
<input type="button" value=">>" class="button btn_add_all">
<input type="button" value="<<" class="button btn_remove_all">
<input type="button" value="<" class="button btn_b">
</div>
</div>
<div class="select_r">
<select size="5" multiple class="select_b">
</select>
</div>
</div>
<br>
<div id="two_way_list_selector_b" class="two_way_list_selector margin_top_10">
<div class="select_l">
<div class="option">名称</div>
<select size="5" multiple class="select_a">
<option value="a" data-index="0">a</option>
<option value="b" data-index="1">b</option>
<option value="c" data-index="2">c</option>
<option value="d" data-index="3">d</option>
<option value="e" data-index="4">e</option>
<option value="f" data-index="5">f</option>
<option value="g" data-index="6">g</option>
</select>
</div>
<div class="select_btn">
<div>
<input type="button" value=">" class="button btn_a">
<input type="button" value=">>" class="button btn_add_all">
<input type="button" value="<<" class="button btn_remove_all">
<input type="button" value="<" class="button btn_b">
</div>
</div>
<div class="select_r">
<select size="5" multiple class="select_b">
</select>
</div>
</div>
</body>
</html>

以上所述是小编给大家介绍的jQuery双向列表选择器select版,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
在JavaScript中使用timer示例
May 08 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 #Javascript
JS button按钮实现submit按钮提交效果
Nov 01 #Javascript
Javascript 动态改变imput type属性
Nov 01 #Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 #Javascript
javascript 内置对象及常见API详细介绍
Nov 01 #Javascript
Vue.js组件使用开发实例教程
Nov 01 #Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 #Javascript
You might like
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
JavaScript基础知识之数据类型
2012/08/06 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
基于Vue实现拖拽功能
2020/07/29 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
[20:30]职业巡回赛回顾
2018/08/09 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python文件操作方法详解
2020/02/09 Python
Python如何执行系统命令
2020/09/23 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
大学生学习生活的自我评价
2013/11/01 职场文书
工商企业管理应届生求职信
2013/11/03 职场文书
员工工作表扬信范文
2014/01/13 职场文书
投资协议书范本
2014/04/21 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
开平碉楼导游词
2015/02/06 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
关于EntityWrapper的in用法
2022/03/22 Java/Android