jQuery雙向列表選擇器select版
更新時(shí)間：2016年11月01日 13:48:55 作者：你好像很美味
這個(gè)是select版的，若想美化某些樣式是不支持得，大家可以使用div模擬版，下面小編給大家介紹下jQuery雙向列表選擇器select版，感興趣的朋友一起看看吧
在上篇文章給大家介紹了div模擬版鏈接：http://chabaoo.cn/article/96211.htm，如果大家感興趣可以參考下。
這個(gè)是select版的，若想美化某些樣式是不支持得，可以用div模擬版的，功能基本實(shí)現(xiàn)能用了，需要其他功能自己加上。
<!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");
//進(jìn)行排序
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));
});
}
//在列表中雙擊時(shí)
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);
}
}
//選項(xiàng)雙擊時(shí)
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);
});
}
//頁(yè)面加載完畢后
$(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">名稱(chēng)</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">名稱(chēng)</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版，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
前些天記錄了java中for循環(huán)取map，發(fā)現(xiàn)用jquery的each一樣可以取map（我稱(chēng)之為js的map，不要較勁），且順序和map中順序一致。2011-02-02
jQuery實(shí)現(xiàn)Twitter的自動(dòng)文字補(bǔ)齊特效
本文介紹了一款jQuery實(shí)現(xiàn)的文字自動(dòng)補(bǔ)全特效的插件，該插件可以結(jié)合本地?cái)?shù)據(jù)進(jìn)行一些操作。推薦關(guān)注一下H5的幾種數(shù)據(jù)存儲(chǔ)的方式（localstorage與sessionstorage、IndexedDB、離線緩存manifest文件）2014-11-11
獲得內(nèi)容的三個(gè)簡(jiǎn)單實(shí)用的方法text()、html() 以及 val()、獲取屬性的attr()方法，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-12-12
近期研究了下MenuButton,有了新的感悟，原先在那個(gè)DEMO中右鍵支持做法，現(xiàn)在看來(lái)真是小兒科啊2012-07-07
jquery實(shí)現(xiàn)員工信息添加與刪除功能
這篇文章主要為大家詳細(xì)介紹了利用jquery制作簡(jiǎn)易的員工信息添加與刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了jQuery遮罩層效果,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery實(shí)現(xiàn)遮罩層的原理與相關(guān)技術(shù)細(xì)節(jié),需要的朋友可以參考下2016-01-01
jquery ajax請(qǐng)求實(shí)例深入解析
jquery中封裝了一些ajax請(qǐng)求的方法，很實(shí)用,本文將以此引入一個(gè)實(shí)例，對(duì)jquery中ajax請(qǐng)求的方法進(jìn)行詳細(xì)介紹，需要了解更多的朋友可以參考下2012-11-11
jQuery實(shí)現(xiàn)的經(jīng)典豎向伸縮菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的經(jīng)典豎向伸縮菜單效果代碼,通過(guò)jQuery響應(yīng)鼠標(biāo)事件遍歷頁(yè)面元素實(shí)現(xiàn)伸縮菜單的效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
一個(gè)簡(jiǎn)單的jQuery計(jì)算器實(shí)現(xiàn)了連續(xù)計(jì)算功能
這篇文章主要介紹了一個(gè)簡(jiǎn)單的jQuery計(jì)算器主要實(shí)現(xiàn)了連續(xù)計(jì)算功能,需要的朋友可以參考下2014-07-07
jquery實(shí)現(xiàn)兼容IE8的異步上傳文件
這里給大家分享的是使用jQuery插件實(shí)現(xiàn)兼容IE8的異步上傳文件的代碼，效果非常不錯(cuò)，有需要的小伙伴可以參考下。2015-06-06