jquery 實(shí)現(xiàn)兩Select 標(biāo)簽項(xiàng)互調(diào)示例代碼

更新時(shí)間：2014年09月25日 17:28:29 投稿：whsnow

這篇文章主要與大家分享了jquery實(shí)現(xiàn)兩Select標(biāo)簽項(xiàng)互調(diào)的具體實(shí)現(xiàn)，比較簡單，比較實(shí)用

<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
</head>


<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function() {
$("#toRight").click(function(){
$("#selectLeft option:selected").each(function(){
$("#selectRight").append("<option value=" + $(this).val() + ">" + $(this).html() + "</option>");
$(this).remove();
});
});

$("#toLeft").click(function(){
$("#selectRight option:selected").each(function(){
$("#selectLeft").append("<option value=" + $(this).val() + ">" + $(this).html() + "</option>");//這個(gè)方法是默認(rèn)在后面添加
//$("#selectLeft option:first").before("<option value=" + $(this).val() + ">" + $(this).html() + "</option>"); //此種方法是在select前面加內(nèi)容
//$("#selectLeft option[value=3]").before("<option value=" + $(this).val() + ">" + $(this).html() + "</option>"); //此種方法是在selectt指定某一行加內(nèi)容
$(this).remove();
});
});

});
//-->
</SCRIPT>


<BODY>
<table>
<tr>
<td>
<select size='10' multiple id="selectLeft" style="width:200px">
<option value="0">Jquery API</option>
<option value="1">JavaScript高級(jí)程序設(shè)計(jì)</option>
<option value="2">鋒利的jQuery</option>
<option value="3">JavaScript 設(shè)計(jì)模式</option>
<option value="4">JavaScript+DOM高級(jí)程序設(shè)計(jì)</option>
<option value="5">PHP高級(jí)程序設(shè)計(jì)</option>
<option value="6">面向?qū)ο蟪绦蛟O(shè)計(jì)</option>
</select>
</td>
<td>
<input type="button" value=" >> " id="toRight" /><br /><br />
<input type="button" value=" << " id="toLeft" />
</td>
<td>
<select size='10' multiple id="selectRight" style="width:200px">
</select>
</td>
</tr>
</table>
</BODY>
</HTML>

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)預(yù)加載圖片的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)預(yù)加載圖片的方法,涉及jQuery操作img的src屬性使用技巧,需要的朋友可以參考下
2015-03-03
Get中文亂碼IE瀏覽器Get中文亂碼解決方案
傳參的時(shí)候遇到Get中文亂碼，IE瀏覽器Get中文亂碼問題，該怎么解決呢？下面為大家詳細(xì)介紹下具體的解決方案
2013-12-12
JQuery實(shí)現(xiàn)簡單驗(yàn)證碼提示解決方案
驗(yàn)證碼提示功能在ui界面的登陸及提交窗口中起到了一定的有好作用，極大的提高了用戶體驗(yàn)，本文帶著這個(gè)美好的祝愿為您實(shí)現(xiàn)簡單驗(yàn)證碼提示,需要的朋友可以了解下
2012-12-12
jquery使用filter()控制子元素顯示隱藏
一般元素下的多個(gè)指定子元素顯示隱藏效果,使用css中的選擇器:nth-child()、:nth-of-type(),但如果想使用JavaScript動(dòng)態(tài)控制,就需要用到j(luò)query的filter()方法
2023-08-08
基于jQuery的倒計(jì)時(shí)插件代碼
jQuery倒計(jì)時(shí)插件，主要用來限時(shí)購買，需要的朋友可以參考下。
2011-05-05
JQuery each打印JS對(duì)象的方法
一個(gè)簡單的JQuery each示例，使用each可以輸出JS對(duì)象、json格式的數(shù)據(jù)，大家參考使用吧
2013-11-11
一個(gè)支持任意尺寸的圖片上下左右滑動(dòng)效果
如果你的網(wǎng)站風(fēng)格適合，可以用這種方式來給頁面布局，支持任意尺寸的圖片滑動(dòng)、上下左右滑動(dòng),需要的朋友可以參考下
2014-08-08
jQuery中Nicescroll滾動(dòng)條插件的用法
本篇文章主要介紹了jQuery中Nicescroll滾動(dòng)條插件的用法，Nicescroll滾動(dòng)條插件是一個(gè)非常強(qiáng)大的基于jQuery的滾動(dòng)條插件，有需要的可以了解下。
2016-11-11
jQuery從零開始做一個(gè)分頁組件功能示例
這篇文章主要介紹了jQuery從零開始做一個(gè)分頁組件功能,結(jié)合實(shí)例形式分析了jQuery分頁組件的具體步驟、功能實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05
jQuery Ajax前后端使用JSON進(jìn)行交互示例
本篇文章主要介紹了jQuery Ajax前后端使用JSON進(jìn)行交互示例，實(shí)現(xiàn)前端通過jQuery Ajax傳輸json到后端，后端接收json，對(duì)json進(jìn)行處理，后端返回一個(gè)json給前端，有興趣的可以了解一下。
2017-03-03