快捷導(dǎo)航

jquery制作select列表雙向選擇示例代碼

更新時間：2014年09月02日 16:16:21 投稿：whsnow

看著標題就知道它是什么意思了，select列表雙向選擇，jquery制作的，兼容性肯定是不錯的

jquery制作的select列表雙向選擇，兼容性肯定是不錯的，需要的朋友可以學(xué)習(xí)下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 

<style> 
.sel{width:150px;height:200px;} 
.btn{width:50px;font-weight:bold;font-size:14px; } 
</style> 
</HEAD> 

<BODY> 
<table> 
<tr> 
<td> 
<select multiple class="sel" id="sel_left"> 
<option value="a">aaaaaaaaaaa</option> 
<option value="b">bbbbbbbbbbb</option> 
<option value="c">ccccccccccc</option> 
<option value="d">ddddddddddd</option> 
<option value="e">eeeeeeeeeee</option> 
</select> 
</td> 
<td> 
<p><button class="btn" id="btn_1">>> </button></p> 
<p><button class="btn" id="btn_2">></button></p> 
<p><button class="btn" id="btn_3"><</button></p> 
<p><button class="btn" id="btn_4"><<</button></p> 

</td> 
<td> 
<select multiple class="sel" id="sel_right"> 
<option value="f">fffffffffff</option> 
</select> 
</td> 
</tr> 
</table> 
</BODY> 
<script> 
$(function(){ 
$("#sel_left,#sel_right").bind("change",checkBtn); 
$("#btn_1,#btn_2,#btn_3,#btn_4").bind("click",clickBtn); 
checkBtn(); 
}); 

function checkBtn(){ 
jQuery("#sel_left>option").length > 0 ? jQuery("#btn_1").removeAttr("disabled") : jQuery("#btn_1").attr("disabled","disabled"); 
jQuery("#sel_left option:selected").length > 0 ? jQuery("#btn_2").removeAttr("disabled") : jQuery("#btn_2").attr("disabled","disabled"); 
jQuery("#sel_right option:selected").length > 0 ? jQuery("#btn_3").removeAttr("disabled") : jQuery("#btn_3").attr("disabled","disabled"); 
jQuery("#sel_right>option").length > 0 ? jQuery("#btn_4").removeAttr("disabled") : jQuery("#btn_4").attr("disabled","disabled"); 
} 

function clickBtn(e){ 
if("btn_1" == e.target.id){ 
jQuery("#sel_left>option").appendTo("#sel_right"); 
}else if("btn_2" == e.target.id){ 
jQuery("#sel_left option:selected").appendTo("#sel_right"); 
}else if("btn_3" == e.target.id){ 
jQuery("#sel_right option:selected").appendTo("#sel_left"); 
}else if("btn_4" == e.target.id){ 
jQuery("#sel_right>option").appendTo("#sel_left"); 
} 
checkBtn(); 
} 
</script> 
</HTML>

您可能感興趣的文章:

相關(guān)文章

ASP.NET jQuery 實例8 (動態(tài)添加內(nèi)容到DropDownList)
在web應(yīng)用里，我們經(jīng)常需要通過其他控件的事件觸發(fā)動態(tài)構(gòu)造DropDownList數(shù)據(jù)內(nèi)容。在這節(jié)中，我們將會看到如何實現(xiàn)通過選擇第一個下來框的內(nèi)容來動態(tài)構(gòu)造第二個下拉框的內(nèi)容
2012-02-02
jQuery ul標簽下拉菜單演示代碼
jQuery ul標簽下拉菜單演示代碼，需要使用基于jquery的下拉菜單效果的朋友可以參考下。
2010-12-12
jQuery cookie的公共方法封裝和使用示例
這篇文章主要介紹了jQuery cookie的公共方法封裝和使用,結(jié)合實例形式詳細分析了jQuery cookie的設(shè)置、獲取、刪除等方法封裝與使用相關(guān)操作技巧,需要的朋友可以參考下
2020-06-06
網(wǎng)頁中返回頂部代碼(多種方法)另附注釋說明
下面就說下簡單的返回頂部效果的代碼實現(xiàn)，附注釋說明，最簡單的靜態(tài)返回頂部，點擊直接跳轉(zhuǎn)頁面頂部及用js模擬滾動效果上滑至頂部
2013-04-04
jQuery操作Select選擇的Text和Value(獲取/設(shè)置/添加/刪除)
本文將詳細介紹下jQuery獲取/設(shè)置/添加/刪除Select選擇的Text和Value,感興趣的你可以參考下本文或許對你有所幫助
2013-03-03
jQuery 動態(tài)云標簽插件
這里推薦給大家一款jquery動態(tài)云標簽的插件，非常的炫，在指定塊級元素內(nèi)動態(tài)生成a標簽，a標簽的高度、寬度、位置、層數(shù)、背景顏色隨機可控，a標簽漸隱顯示和漸隱消失，可改變初始化的透明度，鼠標懸浮停止動畫且透明度最大，層數(shù)最高，鼠標離開，恢復(fù)之前狀態(tài)
2014-11-11
ASP.NET jQuery 實例1(在TextBox里面創(chuàng)建一個默認提示)
通常用戶在搜索內(nèi)容時，在文本框輸入內(nèi)容前，文本框都會給出默認提示，提示用戶輸入正確的內(nèi)容進行搜索
2012-01-01
jQuery實現(xiàn)的網(wǎng)頁左側(cè)在線客服效果代碼
這篇文章主要介紹了jQuery實現(xiàn)的網(wǎng)頁左側(cè)在線客服效果代碼,涉及簡單的jQuery頁面動畫顯示與隱藏效果實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下
2015-10-10
jquery.qrcode在線生成二維碼使用示例
jquery除了它自己非常出色的js功能之外還附帶有數(shù)不清的插件，可以完成各種美好的效果和功能。jquery.qrcode就是其中一個，用來在線生成二維碼
2013-08-08
調(diào)用DOM對象的focus使文本框獲得焦點
要使對象獲得焦點，應(yīng)該調(diào)用DOM對象的focus方法，下面有個不錯的示例，大家可以參考下
2014-02-02