jquery實現(xiàn)穿梭框功能
更新時間：2021年01月19日 15:35:09 作者：陳濤輝
這篇文章主要為大家詳細介紹了jquery實現(xiàn)穿梭框功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery實現(xiàn)穿梭框功能的具體代碼，供大家參考，具體內(nèi)容如下
先上效果圖
就只需要引用一個jq文件就可以
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>穿梭框</title>
<link rel="stylesheet" href="index.css" >
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style>
.float{
float: left;
}
.float select{
width: 300px;
border: 1px solid #ebeef5;
height: 200px;
}
.top_title{
width: 298PX;
height: 30px;
border: 1px solid #ebeef5;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
line-height: 30px;
background: #fbfbfb;
display: flex;
justify-content: space-between;
}
.last_num{
margin-right: 10px;
}
.search{
width: 300px;
display: flex;
/*border: 1px solid red;*/
}
.search input{
float: left;
flex: 4;
height: 30px;
outline: none;
border: 1px solid #ebeef5;
box-sizing: border-box;
padding-left: 10px;
}
.search_button{
float: right;
flex: 1;
height: 30px;
background-color: #f1f1f1;
color: #000000;
border-style: none;
outline: none;
cursor: pointer;/*設(shè)置鼠標箭頭手勢*/
}
.search button i{
font-style: normal;
}
.search button:hover{
font-size: 16px;
}
.to_left,.to_right{
width: 20px;/*設(shè)置按鈕寬度*/
height:20px;/*設(shè)置按鈕高度*/
color:white;/*字體顏色*/
background-color:#667082;/*按鈕背景顏色*/
border-radius: 100%;/*讓按鈕變得圓滑一點*/
border-width: 0;/*消去按鈕丑的邊框*/
margin: 0;
outline: none;/*取消輪廓*/
text-align: center;/*字體居中*/
cursor: pointer;/*設(shè)置鼠標箭頭手勢*/
}
button:hover{/*鼠標移動時的顏色變化*/
background-color: #aa9a8a;
}
.click_button{
border-radius: 5px;
background: #deded8;
padding: 5px 0;
margin: 115px 5px 0px 5px;
}
</style>
</head>
<body>
<div>
<div class="float">
<div class="top_title">
<div class="float_title"><label><input type="checkbox" class="left_checkbox">全選</label></div>
<div class="float_title">標題</div>
<div class="float_title last_num" ><span class="old_select_length">0</span>/<span class="old_total_length">0</span></div>
</div>
<div class="search">
<input class="old_search" type="text" placeholder="請輸入..." name="" id="" value="" />
</div>
<select multiple class="old_select">
<option value="1">11111</option>
<option value="2">22222</option>
<option value="3">33333</option>
<option value="4">123</option>
<option value="5">23312</option>
<option value="6">23233</option>
<option value="7">21233</option>
<option value="8">12233</option>
<option value="9">23133</option>
</select>
</div>
<div class="float">
<div class="click_button">
<div><button class="to_left">></button></div>
<div><button class="to_right"><</button></div>
</div>
</div>
<div class="float">
<div class="top_title">
<div class="float_title"><label><input type="checkbox" class="right_checkbox">全選</label></div>
<div class="float_title">標題</div>
<div class="float_title last_num" ><span class="new_select_length">0</span>/<span class="new_total_length">0</span></div>
</div>
<div class="search">
<input class="new_search" type="text" placeholder="請輸入..." name="" id="" value="" />
</div>
<select multiple class="new_select">
<option value="1">11111</option>
<option value="2">22222</option>
<option value="3">33333</option>
<option value="4">123</option>
<option value="5">233</option>
</select>
</div>
</div>
<script>
//右上角的數(shù)字顯示“”
function length_return(){
var old_total_length= $(".old_select").find('option').length;
var old_select_length= $(".old_select").find('option:selected').length;
var new_total_length= $(".new_select").find('option').length;
var new_select_length= $(".new_select").find('option:selected').length
$(".old_total_length").text(old_total_length)
$(".old_select_length").text(old_select_length)
$(".new_total_length").text(new_total_length)
$(".new_select_length").text(new_select_length)
};
$(".to_left").click(function(){
var old_select= $(".old_select");
var new_select= $(".new_select");
old_select.find('option:selected').each(function () {
new_select.append(this)
})
length_return()
})
$(".to_right").click(function(){
var old_select= $(".old_select");
var new_select= $(".new_select");
new_select.find('option:selected').each(function () {
old_select.append(this)
})
length_return()
})
$(".left_checkbox").click(function(){
if($(this).is(":checked")){
$(".old_select").find('option').each(function () {
$(this).attr("selected","selected")
})
}
else{
$(".old_select").find('option').each(function () {
$(this).removeAttr("selected")
})
}
length_return()
})
$(".right_checkbox").click(function(){
if($(this).is(":checked")){
$(".new_select").find('option').each(function () {
$(this).attr("selected","selected")
})
}
else{
$(".new_select").find('option').each(function () {
$(this).removeAttr("selected")
})
}
length_return()
})
$("select").on("click","option",function(e){
if($(".left_checkbox").is(":checked"))
{
$('.left_checkbox').prop('checked', false);
}
length_return();
})
$("select").on("click","option",function(e){
if($(".right_checkbox").is(":checked"))
{
$('.right_checkbox').prop('checked', false);
}
length_return();
})
$(".old_search").on("input propertychange",function(event){
//進行查詢操作
var old_select= $(".old_select");
var kw = $(this).val()
if (!kw){
old_select.find("option").show()
}
old_select.find("option").each(function(){
if($(this).text().indexOf(kw) < 0)
{
$(this).hide()
}
})
})
$(".new_search").on("input propertychange" ,function(event){
var new_select=$(".new_select");
var kw=$(this).val()
if(!kw){
new_select.find("option").show();
}
new_select.find("option").each(function(){
if($(this).text().indexOf(kw)<0){
$(this).hide()
}
})
})
length_return()
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
jQuery mobile轉(zhuǎn)換url地址及獲取url中目錄部分的方法
這篇文章主要介紹了jQuery mobile轉(zhuǎn)換url地址及獲取url中目錄部分的方法,轉(zhuǎn)換url地址本文中介紹的是將相對url轉(zhuǎn)化為絕對url,需要的朋友可以參考下2015-12-12
jQuery是一個JavaScript庫，它簡化了客戶端JavaScript編程的過程，特別是針對HTML文檔遍歷和操作、事件處理、動畫效果和Ajax操作。感興趣的小伙伴可以參考閱讀2023-04-04
這篇文章主要介紹了如何解決jQuery動態(tài)獲取手機屏幕高和寬的問題,需要的朋友可以參考下2014-05-05
EASYUI TREEGRID異步加載數(shù)據(jù)實現(xiàn)方法
找了一下官方文檔，看了EASYUI的異步加載，弄了我兩三個小時，死活都不出數(shù)據(jù)2012-08-08
如果一定要用最高版本的jQuery，最省事的辦法莫過于在寫xxx.focus()時，加一個try/catch，變成try{xxx.focus();}catch(e){}2014-01-01
jquery.post用法關(guān)于type設(shè)置問題補充
當使用ajax獲取data數(shù)據(jù)的時候，直接data.foo就可以得到。而較低版本的jquery就不行比如1.4之前，下面為大家介紹下jquery.post用法關(guān)于type設(shè)置問題2014-01-01
這篇文章主要介紹了jQuery選擇id屬性帶有點符號元素的方法,涉及jQuery選擇器的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
jQuery插件bxSlider實現(xiàn)響應(yīng)式焦點圖
bxSlider特性1.充分響應(yīng)各種設(shè)備，適應(yīng)各種屏幕；2.支持多種滑動模式，水平、垂直以及淡入淡出效果；3.支持圖片、視頻以及任意html內(nèi)容；4.支持觸摸滑動；5.支持Firefox，Chrome，Safari，iOS，Android，IE7+，下面我們就來詳細探討下吧。2015-04-04
jQuery移動web開發(fā)之頁面跳轉(zhuǎn)和加載外部頁面的實現(xiàn)
這篇文章主要介紹了jQuery移動web開發(fā)之頁面跳轉(zhuǎn)和加載外部頁面的實現(xiàn),以changePage()和loadPage()方法的使用為主,需要的朋友可以參考下2015-12-12
分享10篇優(yōu)秀的jQuery幻燈片制作教程及應(yīng)用案例
jQuery 是一個非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，同時還有許多成熟的插件可供選擇，它可以幫助你在項目中加入一些非常好的效果。2011-04-04