Jquery多選框互相內(nèi)容交換的實(shí)例代碼
更新時(shí)間：2013年07月04日 16:03:02 作者：
這篇文章介紹了Jquery多選框互相內(nèi)容交換的實(shí)例代碼，有需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
<head runat="server">
<title>無(wú)標(biāo)題頁(yè)</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 把選擇項(xiàng)追加給對(duì)方
$('#add').click(function(){
var options=$('#select1 option:selected');
var remove=options.remove();
remove.appendTo("#select2");
});
// 把所有項(xiàng)追加給對(duì)方
$('#addAll').click(function(){
var options=$('#select1 option');
var remove=options.remove();
remove.appendTo("#select2");
});
// 把選擇項(xiàng)退回給對(duì)方
$('#remove').click(function(){
var options=$('#select2 option:selected');
var remove=options.remove();
remove.appendTo("#select1");
});
// 把全部項(xiàng)退回給對(duì)方
$('#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>選項(xiàng)1</option>
<option>選項(xiàng)2</option>
<option>選項(xiàng)3</option>
<option>選項(xiàng)4</option>
<option>選項(xiàng)5</option>
</select>
</div>
<div>
<span id="add">選中項(xiàng)添加至右邊>></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"><<選中項(xiàng)還原至左邊</span><br />
<span id="removeAll"><<全部還原至左邊</span>
</div>
</form>
</body>
您可能感興趣的文章:
- jQuery 獲取多選框的值及多選框中文的函數(shù)
- jQuery實(shí)現(xiàn)的多選框多級(jí)聯(lián)動(dòng)插件
- jquery select多選框的左右移動(dòng) 具體實(shí)現(xiàn)代碼
- jquery對(duì)單選框,多選框,文本框等常見(jiàn)操作小結(jié)
- 簡(jiǎn)單實(shí)現(xiàn)jQuery多選框功能
- jQuery對(duì)下拉框,單選框,多選框的操作
- jQuery多選框選擇數(shù)量限制方法
- jquery中表單 多選框的一種巧妙寫(xiě)法
- jQuery模擬html下拉多選框的原生實(shí)現(xiàn)方法示例
- jQuery中實(shí)現(xiàn)prop()函數(shù)控制多選框(全選,反選)
- jQuery實(shí)現(xiàn)獲取多選框的值示例
相關(guān)文章
這篇文章主要介紹了詳解jQuery中ajax.load()方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-01-01
忙了一夜，終于把jquery的顏色選擇插件寫(xiě)完了，不多說(shuō)了，看看代碼吧。2008-10-10
jQuery判斷div隨滾動(dòng)條滾動(dòng)到一定位置后停止
這篇文章主要介紹了jQuery判斷div隨滾動(dòng)條滾動(dòng)到一定位置后停止的方法,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了JQuery中的AJAX，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
jquery 動(dòng)態(tài)調(diào)整textarea高度
用jquery實(shí)現(xiàn)的調(diào)整textarea高度的實(shí)現(xiàn)代碼。這個(gè)動(dòng)畫(huà)效果比較流暢。適合新手學(xué)習(xí)。2009-11-11
jQuery實(shí)現(xiàn)動(dòng)畫(huà)、消失、顯現(xiàn)、漸出、漸入效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)畫(huà)、消失、顯現(xiàn)、漸出、漸入效果,結(jié)合實(shí)例形式分析了jQuery中animate()、hide()、show()、slideUp()、slideDown()、slideToggle()、fadeOut()、fadeIn()等方法簡(jiǎn)單使用技巧,需要的朋友可以參考下2018-09-09
jquery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表單驗(yàn)證實(shí)例
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表單驗(yàn)證實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-03-03
用jquery中插件dialog實(shí)現(xiàn)彈框效果實(shí)例代碼
這篇文章介紹了jquery中插件dialog實(shí)現(xiàn)彈框效果實(shí)例代碼，有需要的朋友可以參考一下2013-11-11
運(yùn)用jQuery寫(xiě)的驗(yàn)證表單(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇運(yùn)用jQuery寫(xiě)的驗(yàn)證表單(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要介紹了jQuery自定義添加"$"與解決"$"沖突的方法,介紹了用戶自定義添加“$”擴(kuò)展jQuery功能的方法,以及解決"$"沖突的技巧,需要的朋友可以參考下2015-01-01