jquery制作select列表雙向選擇示例代碼
更新時間：2014年09月02日 16:16:21 投稿：whsnow
看著標題就知道它是什么意思了，select列表雙向選擇，jquery制作的，兼容性肯定是不錯的
jquery制作的select列表雙向選擇，兼容性肯定是不錯的，需要的朋友可以學習下
<!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>
您可能感興趣的文章:
- 基于JQuery實現(xiàn)的Select級聯(lián)
- jquery取消選擇select下拉框示例代碼
- jquery實現(xiàn)省市select下拉框的替換(示例代碼)
- jquery 操作兩個select實現(xiàn)值之間的互相傳遞
- jQuery取得設置清空select選擇的文本與值
- jquery 實現(xiàn)兩Select 標簽項互調(diào)示例代碼
- jQuery制作簡潔的多級聯(lián)動Select下拉框
- jQuery中:selected選擇器用法實例
- jquery操作select方法匯總
- Jquery對select的增、刪、改、查操作
- jquery實現(xiàn)動態(tài)操作select選中
- JQuery select（下拉框）操作方法匯總
- jquery使用ul模擬select實現(xiàn)表單美化的方法
- jQuery實現(xiàn)的仿select功能代碼
- 基于jquery實現(xiàn)select選擇框內(nèi)容左右移動添加刪除代碼分享
相關文章
ASP.NET jQuery 實例8 (動態(tài)添加內(nèi)容到DropDownList)
在web應用里，我們經(jīng)常需要通過其他控件的事件觸發(fā)動態(tài)構造DropDownList數(shù)據(jù)內(nèi)容。在這節(jié)中，我們將會看到如何實現(xiàn)通過選擇第一個下來框的內(nèi)容來動態(tài)構造第二個下拉框的內(nèi)容2012-02-02
jQuery ul標簽下拉菜單演示代碼，需要使用基于jquery的下拉菜單效果的朋友可以參考下。2010-12-12
這篇文章主要介紹了jQuery cookie的公共方法封裝和使用,結合實例形式詳細分析了jQuery cookie的設置、獲取、刪除等方法封裝與使用相關操作技巧,需要的朋友可以參考下2020-06-06
下面就說下簡單的返回頂部效果的代碼實現(xiàn)，附注釋說明，最簡單的靜態(tài)返回頂部，點擊直接跳轉頁面頂部及用js模擬滾動效果上滑至頂部2013-04-04
jQuery操作Select選擇的Text和Value(獲取/設置/添加/刪除)
本文將詳細介紹下jQuery獲取/設置/添加/刪除Select選擇的Text和Value,感興趣的你可以參考下本文或許對你有所幫助2013-03-03
這里推薦給大家一款jquery動態(tài)云標簽的插件，非常的炫，在指定塊級元素內(nèi)動態(tài)生成a標簽，a標簽的高度、寬度、位置、層數(shù)、背景顏色隨機可控，a標簽漸隱顯示和漸隱消失，可改變初始化的透明度，鼠標懸浮停止動畫且透明度最大，層數(shù)最高，鼠標離開，恢復之前狀態(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)頁左側在線客服效果代碼
這篇文章主要介紹了jQuery實現(xiàn)的網(wǎng)頁左側在線客服效果代碼,涉及簡單的jQuery頁面動畫顯示與隱藏效果實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-10-10
jquery除了它自己非常出色的js功能之外還附帶有數(shù)不清的插件，可以完成各種美好的效果和功能。jquery.qrcode就是其中一個，用來在線生成二維碼2013-08-08
要使對象獲得焦點，應該調(diào)用DOM對象的focus方法，下面有個不錯的示例，大家可以參考下2014-02-02