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 相关文章推荐
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
Node.js fs模块原理及常见用途
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数组是否为空的代码
2011/09/08 PHP
php数组合并的二种方法
2014/03/21 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
php 可变函数使用小结
2018/06/12 PHP
php精度计算的问题解析
2019/06/21 PHP
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
python 实现敏感词过滤的方法
2019/01/21 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python库安装速度过慢解决方案
2020/07/14 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
银行存款证明样本
2014/01/17 职场文书
个人借款协议书范本
2014/11/17 职场文书
通报表扬范文
2015/01/17 职场文书
国家助学金感谢信
2015/01/21 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis