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 相关文章推荐
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 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中的类型提示(type hinting)功能介绍
2015/07/01 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
js验证是否为数字的总结
2013/04/14 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python变量类型知识点总结
2019/02/18 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
经典大学生求职信范文
2014/01/06 职场文书
数学系毕业生求职信
2014/05/29 职场文书
语文教研活动总结
2014/07/02 职场文书
大国崛起日本观后感
2015/06/02 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python