select下拉選單項互換效果程式碼例項
在不少的效果中都有select下拉選單項中的option元素相互置換的效果。
下面就通過程式碼例項介紹一下如何實現此功能。
程式碼如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/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>"); $(this).remove(); }) }) }) </script> </head> <body> <table> <tr> <td> <select size='10' multiple id="selectLeft"> <option value="0">螞蟻部落</option> <option value="1">js教程</option> <option value="2">css教程</option> <option value="3">softwhy.com</option> <option value="4">正規表示式</option> <option value="5">特效程式碼</option> <option value="6">div教程</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"> <option value="7">電腦模板</option> </select> </td> </tr> </table> </body> </html>
上面的程式碼實現了我們的要求,由於程式碼比較簡單這裡就不多介紹。
相關文章
- select下拉選單跳轉效果程式碼
- jQuery tab選項卡效果程式碼例項jQuery
- 設定select下拉選單的預設選中項
- jQuery點選滑出層效果程式碼例項jQuery
- 淡入淡出效果簡單程式碼例項
- canvas載入效果程式碼例項Canvas
- CSS橢圓效果程式碼例項CSS
- html實現簡單ListViews效果的例項程式碼HTMLView
- 純css tab選項卡程式碼例項CSS
- jq+css+html打造下拉導航選單例項CSSHTML單例
- 美化滾動條效果程式碼例項
- canvas原型鐘錶效果程式碼例項Canvas原型
- css3水滴效果程式碼例項CSSS3
- css背景虛化效果程式碼例項CSS
- canvas氣泡上浮效果程式碼例項Canvas
- HTML select 下拉選單HTML
- HTML select下拉選單HTML
- html 仿百度百科導航下拉選單功能例項程式碼介紹HTML
- jquery.idTabs.min.js選項卡程式碼例項jQueryJS
- css3晃動效果程式碼例項CSSS3
- CSS3心形效果程式碼例項CSSS3
- div前後翻轉效果程式碼例項
- 當前文字框高亮效果程式碼例項
- CSS3旋轉效果程式碼例項CSSS3
- canvas繪製箭頭效果程式碼例項Canvas
- CSS3立體導航選單程式碼例項CSSS3
- JavaScript新增和刪除select下拉項JavaScript
- jQuery 美化select下拉選單jQuery
- 圓角select下拉選單
- CSS3滑過光束效果程式碼例項CSSS3
- CSS3小黃人效果程式碼例項CSSS3
- css3折角效果程式碼例項CSSS3
- CSS3梯形效果程式碼例項CSSS3
- CSS3背景漸變效果程式碼例項CSSS3
- CSS3星系運動效果程式碼例項CSSS3
- jQuery table表格隔行換色程式碼例項jQuery
- JavaScript 表單驗證程式碼例項JavaScript
- select下拉選項,點選時,change事件事觸發多次,請求多次。事件
- 商品搶購倒數計時效果程式碼例項