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 相关文章推荐
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
js工具方法弹出蒙版
May 08 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
puppeteer库入门初探
Jan 09 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
JavaScript数组排序小程序实现解析
Jan 13 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执行速度全攻略(下)
2006/10/09 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
php中关于换行的实例写法
2019/09/26 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
python实现简单遗传算法
2018/03/19 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
学生实习自我鉴定
2013/10/11 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
爱国口号
2014/06/19 职场文书
国庆宣传标语
2014/06/30 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android