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),比較簡(jiǎ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>
您可能感興趣的文章:
- jQuery結(jié)合CSS制作漂亮的select下拉菜單
- 基于jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)添加刪除代碼分享
- jQuery實(shí)現(xiàn)的仿select功能代碼
- jquery使用ul模擬select實(shí)現(xiàn)表單美化的方法
- jquery實(shí)現(xiàn)select下拉框美化特效代碼分享
- jquery實(shí)現(xiàn)動(dòng)態(tài)操作select選中
- Jquery對(duì)select的增、刪、改、查操作
- jquery操作select方法匯總
- jQuery制作簡(jiǎn)潔的多級(jí)聯(lián)動(dòng)Select下拉框
- jQuery實(shí)現(xiàn)非常實(shí)用漂亮的select下拉菜單選擇效果
相關(guān)文章
使用PHP+JQuery+Ajax分頁(yè)的實(shí)現(xiàn)
本篇文章小編將為大家介紹,使用PHP+JQuery+Ajax分頁(yè)的實(shí)現(xiàn)。需要的朋友參考下2013-04-04jQuery插件jqGrid動(dòng)態(tài)獲取列和列字段的方法
這篇文章主要介紹了jQuery插件jqGrid動(dòng)態(tài)獲取列和列字段的方法,結(jié)合實(shí)例形式分析了表格插件jqGrid針對(duì)表格字段屬性相關(guān)操作技巧,需要的朋友可以參考下2017-03-03jquery果凍抖動(dòng)效果實(shí)現(xiàn)方法
這篇文章主要介紹了jquery果凍抖動(dòng)效果實(shí)現(xiàn)方法,涉及animate方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01jQuery實(shí)現(xiàn)簡(jiǎn)單的Ajax調(diào)用功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的Ajax調(diào)用功能,結(jié)合實(shí)例形式分析了jQuery的$.ajax方法與后臺(tái)php交互實(shí)現(xiàn)ajax調(diào)用功能相關(guān)操作技巧,需要的朋友可以參考下2019-02-02jquery彈出框插件jquery.ui.dialog用法分析
這篇文章主要介紹了jquery彈出框插件jquery.ui.dialog用法,結(jié)合實(shí)例形式分析了彈出框插件jquery.ui.dialog的功能、下載、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-08-08判斷jQuery是否加載完成,沒(méi)完成繼續(xù)判斷的解決方法
下面小編就為大家分享一篇判斷jQuery是否加載完成,如果沒(méi)完成繼續(xù)判斷的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12jquery win 7透明彈出層效果的簡(jiǎn)單代碼
jquery win 7透明彈出層效果,點(diǎn)擊可以彈出一個(gè)透明層的jquery特效,插件可以調(diào)彈出框的寬度和高度,很不錯(cuò)的一個(gè)彈出層插件。2013-08-08