jQuery双向列表选择器select版
在上篇文章给大家介绍了div模拟版链接：http://www.jb51.net/article/96211.htm，如果大家感兴趣可以参考下。
这个是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版，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
jQuery Selector选择器小结
//jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素 // $("*"); // 表示页面所有元素标签 // $("th, td") // 表示所有<th><td>元素标签 // $("a") // 表示所有<a>元素标签 // $("div#
-
jQuery Selectors(选择器)的使用(九、表单对象属性篇)
本系列文章分为:基本篇.层次篇.简单篇.内容篇.可见性篇.属性篇.子元素篇.表单篇.表单对象属性篇共9篇文章. 本篇讲解::enabled,:disabled,:checked,:selected的用法. 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过! 运行后,需要刷新下,加载下jquery jQuery-Selectors-9 .div { width:95%; margin-left:15px
-
jQuery中:selected选择器用法实例
本文实例讲述了jQuery中:selected选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配被选择的<option>元素. 语法结构: 复制代码 代码如下: $(":selected") 此选择器可以和其他选择器配合使用,比如类选择器.元素选择器等等.例如: 复制代码 代码如下: $(".myselect :selected").css("color","red") 以上代码能够将类名为myse
-
jQuery Selectors(选择器)的使用(二、层次篇)
本系列文章分为:基本篇.层次篇.简单篇.内容篇.可见性篇.属性篇.子元素篇.表单篇.表单对象属性篇共9篇文章. 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过! 在线地址 http://demo.jb51.net/html/jquery/jQuery-Selectors-2-bynet.htm jQuery-Selectors-2-bynet .div { width:95%; margin-lef
-
jQuery Selectors(选择器)的使用(六、属性篇)
本系列文章分为:基本篇.层次篇.简单篇.内容篇.可见性篇.属性篇.子元素篇.表单篇.表单对象属性篇共9篇文章. 本篇讲解:[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN]的用法. 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术
-
jQuery Selectors(选择器)的使用(七、子元素篇)
本系列文章分为:基本篇.层次篇.简单篇.内容篇.可见性篇.属性篇.子元素篇.表单篇.表单对象属性篇共9篇文章. 本篇讲解::nth-child(index/even/odd/equation),:first-child,:last-child,:only-child的用法. 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过! 您可以到jQuery官网来学习更多的有关jQuery知识. 运行后,请刷新下
-
jQuery选择器querySelector的使用指南
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器.这使得在编写原生JavaScript代码时方便了许多. 用法 两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法. 复制代码 代码如下: element = document.querySelector('selectors'); elementList =
-
jQuery Selectors(选择器)的使用(一、基本篇)
我的学习方法:先入门,后进阶!本系列文章分为:基本篇.层次篇.简单篇.内容篇.可见性篇.属性篇.子元素篇.表单篇.表单对象属性篇共9篇文章. 详细介绍页面 http://demo.jb51.net/html/jquery/jQuery-Selector.html jQuery-Selectors .div { width:95%; margin-left:15px; margin-top:15px; margin-right:15px; padding-left:5px; padding-top
-
jQuery Selectors(选择器)的使用(四-五、内容篇&可见性篇)
本系列文章分为:基本篇.层次篇.简单篇.内容篇.可见性篇.属性篇.子元素篇.表单篇.表单对象属性篇共9篇文章. 本篇讲解::contains(text),:empty,:has(selector),:parent,:hidden,:visible的用法. 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过! 您可以到jQuery官网来学习更多的有关jQuery知识. jQuery-Selectors-4
-
jQuery双向列表选择器select版
在上篇文章给大家介绍了div模拟版链接:http://www.jb51.net/article/96211.htm,如果大家感兴趣可以参考下. 这个是select版的,若想美化某些样式是不支持得,可以用div模拟版的,功能基本实现能用了,需要其他功能自己加上. <!doctype html> <html> <head> <meta charset="utf-8"> <title>双向列表选择器select版</title
-
jQuery双向列表选择器DIV模拟版
前段时间项目需要用到双向列表选择,想直接用select,结果发现某些样式不支持,只好用div模拟了以下,功能基本实现能用了,需要其他功能自己加上,譬如列表里展示多列数据等. select版链接:http://www.cnblogs.com/tie123abc/p/6018912.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>双向列表选择器DIV
-
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
手机端网页版app在使用下拉列表时,传统的下拉列表使用起来体验非常不好,一般做的稍好一点的交互功能界面都不会直接使用下拉列表,所以app的原生下拉列表都是弹窗列表选择,网页型app从使用体验上来当然也应该做成那样,前段时间在开发网页版app时就遇到这种需求,不仅是日期选择器,数据列表.变量列表选择等等下拉列表型需求都需要,网上找来找去只找到一款比较好的mobiscroll,不过下载比较麻烦,感觉比较奇怪的是jquery.mobile.jeasyui.mobile都没有提供这种控件,不知道为什么?
-
jQuery四种选择器使用及示例
jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 <p> 元素. $("p#demo") 选取所有 id="demo" 的 <p> 元素. 示例代码: jquery 部分 $(document).ready(function(){/
-
JQuery的常用选择器、过滤器、方法全面介绍
1.jQuery对象转换成DOM对象 a. var $cr = $("#cr"); //jQuery对象 var cr=$cr[0]; //DOM对象 alert(cr.checked); //检测checkbox是否被选中了 b. var $cr=$("#cr"); //jQuery对象 var cr=$cr.get(0); //DOM对象 alert(cr.checked); //检测checkbox是否被选中了 2.DOM对象转换成jQuery对象 var c
-
jQuery中:lt选择器用法实例
本文实例讲述了jQuery中:lt选择器用法.分享给大家供大家参考.具体分析如下: 此选择器匹配所有小于给定索引值的元素. 索引值最小是从0开始的. 语法结构: 复制代码 代码如下: $(":lt(index)") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等. 例如: 复制代码 代码如下: $("li:lt(3)").css("color","blue") 以上代码能够将索引小于3的li元素中的字体颜色
-
jQuery中:has选择器用法实例
本文实例讲述了jQuery中has选择器用法.分享给大家供大家参考.具体分析如下: 此选择器匹配含有选择器所匹配的元素的元素. 语法结构: 复制代码 代码如下: $(":has(selector)") 关于此选择器的定义可能有点拗口,通俗的讲就是如果一个元素含有selector(选择器)所匹配的元素,那么此元素将被匹配.例如: 复制代码 代码如下: $("div:has(p)") 以上选择器将匹配含有p元素的div元素. 此选择器一般也要和其他选择器配合使用,比如类
-
关于jquery中动态增加select,事件无效的快速解决方法
近来做项目,用的jquery1.6.2库,当动态增加div 及select时,事件却不起作用. 查了一些资料,发现bind事件:向匹配元素附加一个或更多事件处理器.而live事件:为当前或未来的匹配元素添加一个或多个事件处理器. 其资料如下: [bind和live的区别] live方法其实是bind方法的变种,其基本功能就同bind方法的功能是一样的,都是为一个元素绑定某个事件,但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS等方式新生成的元素无效,而live方法则正好弥补了bin
-
jQuery中element选择器用法实例
本文实例讲述了jQuery中element选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配具有指定标签名的元素.例如: 复制代码 代码如下: $("div") 以上代码能够选取所有的div元素. 语法结构: 复制代码 代码如下: $(element) 参数列表: 参数 描述 element 一个用于搜索的元素.指向DOM节点的标签名. 实例代码: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> &l