Jquery多選框互相內(nèi)容交換的實例代碼
更新時間：2013年07月04日 16:03:02 作者：
這篇文章介紹了Jquery多選框互相內(nèi)容交換的實例代碼，有需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
<head runat="server">
<title>無標題頁</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 把選擇項追加給對方
$('#add').click(function(){
var options=$('#select1 option:selected');
var remove=options.remove();
remove.appendTo("#select2");
});
// 把所有項追加給對方
$('#addAll').click(function(){
var options=$('#select1 option');
var remove=options.remove();
remove.appendTo("#select2");
});
// 把選擇項退回給對方
$('#remove').click(function(){
var options=$('#select2 option:selected');
var remove=options.remove();
remove.appendTo("#select1");
});
// 把全部項退回給對方
$('#removeAll').click(function(){
var options=$('#select2 option');
var remove=options.remove();
remove.appendTo("#select1");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="left">
<select multiple="multiple" id="select1" style="width:100px;height:160px">
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
<option>選項4</option>
<option>選項5</option>
</select>
</div>
<div>
<span id="add">選中項添加至右邊>></span><br />
<span id="addAll">全部添加到右邊>></span>
</div>
<div id="right">
<select multiple="multiple" id="select2" style="width:100px;height:160px"></select>
</div>
<div>
<span id="remove"><<選中項還原至左邊</span><br />
<span id="removeAll"><<全部還原至左邊</span>
</div>
</form>
</body>
您可能感興趣的文章:
- jQuery 獲取多選框的值及多選框中文的函數(shù)
- jQuery實現(xiàn)的多選框多級聯(lián)動插件
- jquery select多選框的左右移動 具體實現(xiàn)代碼
- jquery對單選框,多選框,文本框等常見操作小結(jié)
- 簡單實現(xiàn)jQuery多選框功能
- jQuery對下拉框,單選框,多選框的操作
- jQuery多選框選擇數(shù)量限制方法
- jquery中表單 多選框的一種巧妙寫法
- jQuery模擬html下拉多選框的原生實現(xiàn)方法示例
- jQuery中實現(xiàn)prop()函數(shù)控制多選框(全選,反選)
- jQuery實現(xiàn)獲取多選框的值示例
相關(guān)文章
ImgAreaSelect是一jQuery插件，它支持用戶通過鼠標拖曳選擇圖片的一部分，非常的fashion。另外，可以在這個選擇圖像區(qū)域的基礎(chǔ)上應(yīng)用網(wǎng)站的其他一些技術(shù)，比如圖片拖曳、圖片編輯等。2011-10-10
前面性能優(yōu)化已經(jīng)說過，ID選擇器的速度是最快的。所以在HTML代碼中，能使用ID的盡量使用ID來代替class。2009-05-05
jquery實現(xiàn)可旋轉(zhuǎn)可拖拽的文字效果代碼
這篇文章主要介紹了jquery實現(xiàn)可旋轉(zhuǎn)可拖拽的文字效果代碼,涉及jquery響應(yīng)鼠標事件動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
本篇文章主要是對jQuery 文本框得失焦點的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
Jquery實時監(jiān)聽input value的實例
下面小編就為大家?guī)硪黄狫query實時監(jiān)聽input value的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了jquery交替變換顏色的三種方法，有需要的朋友可以參考一下2013-11-11
jQuery操作iframe中js函數(shù)的方法小結(jié)
這篇文章主要介紹了jQuery操作iframe中js函數(shù)的方法,結(jié)合實例形式總結(jié)分析了jQuery操作iframe中的元素、函數(shù)常用方法與注意事項,具有一定參考借鑒價值,需要的朋友可以參考下2016-07-07
使用jquery datatable和bootsrap創(chuàng)建表格實例代碼
這篇文章主要介紹了使用jquery-datatable和bootsrap創(chuàng)建表格的實例代碼,需要的朋友可以參考下2017-03-03
這篇文章介紹了Jquery中給animation加更多的運作效果實例，有需要的朋友可以參考一下2013-09-09
一定要注意如果從list的開始元素循環(huán)下去，remove掉一個元素后，有些元素就找不到了或者說不是要找的那個元素，感興趣的各位可以研究下哈2013-06-06