jquery 實現兩Select 標簽項互調示例代碼
更新時間：2014年09月25日 17:28:29 投稿：whsnow
這篇文章主要與大家分享了jquery實現兩Select標簽項互調的具體實現，比較簡單，比較實用
<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>");//這個方法是默認在后面添加
//$("#selectLeft option:first").before("<option value=" + $(this).val() + ">" + $(this).html() + "</option>"); //此種方法是在select前面加內容
//$("#selectLeft option[value=3]").before("<option value=" + $(this).val() + ">" + $(this).html() + "</option>"); //此種方法是在selectt指定某一行加內容
$(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高級程序設計</option>
<option value="2">鋒利的jQuery</option>
<option value="3">JavaScript 設計模式</option>
<option value="4">JavaScript+DOM高級程序設計</option>
<option value="5">PHP高級程序設計</option>
<option value="6">面向對象程序設計</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>
相關文章
這篇文章主要介紹了jQuery實現預加載圖片的方法,涉及jQuery操作img的src屬性使用技巧,需要的朋友可以參考下2015-03-03
傳參的時候遇到Get中文亂碼，IE瀏覽器Get中文亂碼問題，該怎么解決呢？下面為大家詳細介紹下具體的解決方案2013-12-12
驗證碼提示功能在ui界面的登陸及提交窗口中起到了一定的有好作用，極大的提高了用戶體驗，本文帶著這個美好的祝愿為您實現簡單驗證碼提示,需要的朋友可以了解下2012-12-12
一般元素下的多個指定子元素顯示隱藏效果,使用css中的選擇器:nth-child()、:nth-of-type(),但如果想使用JavaScript動態(tài)控制,就需要用到jquery的filter()方法2023-08-08
jQuery倒計時插件，主要用來限時購買，需要的朋友可以參考下。2011-05-05
一個簡單的JQuery each示例，使用each可以輸出JS對象、json格式的數據，大家參考使用吧2013-11-11
如果你的網站風格適合，可以用這種方式來給頁面布局，支持任意尺寸的圖片滑動、上下左右滑動,需要的朋友可以參考下2014-08-08
本篇文章主要介紹了jQuery中Nicescroll滾動條插件的用法，Nicescroll滾動條插件是一個非常強大的基于jQuery的滾動條插件，有需要的可以了解下。2016-11-11
這篇文章主要介紹了jQuery從零開始做一個分頁組件功能,結合實例形式分析了jQuery分頁組件的具體步驟、功能實現技巧與操作注意事項,需要的朋友可以參考下2020-05-05
本篇文章主要介紹了jQuery Ajax前后端使用JSON進行交互示例，實現前端通過jQuery Ajax傳輸json到后端，后端接收json，對json進行處理，后端返回一個json給前端，有興趣的可以了解一下。2017-03-03