快捷導(dǎo)航

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

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

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

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