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下拉選單級聯效果例項程式碼
- select下拉選單美化程式碼例項
- select下拉選單多級級聯效果程式碼例項
- javascript刪除select下拉選單項程式碼例項JavaScript
- jQuery美化select下拉選單程式碼例項jQuery
- jQuery操作select下拉選單程式碼例項jQuery
- 模擬select下拉選單程式碼例項
- 替換預設select下拉選單箭頭程式碼例項
- 原生javascript操作select下拉選單程式碼例項JavaScript
- select級聯下拉選單程式碼例項分析
- 模擬美化select下拉選單程式碼例項
- 刪除和新增select下拉選單option項程式碼例項
- 模擬實現select下拉選單例項程式碼單例
- javascript新增和刪除select下拉選單option項程式碼例項JavaScript
- js模擬實現select下拉選單程式碼例項JS
- js如何互換兩個select下拉選單的option項JS
- 選中select下拉選單option項實現提交效果
- css二級下拉選單程式碼例項CSS
- javascript設定select下拉選單readonly只讀程式碼例項JavaScript
- 具有淡入淡出效果的下拉導航選單例項程式碼單例
- 純CSS實現的二級下拉選單效果程式碼例項CSS
- jQuery選項卡切換圖片效果程式碼例項jQuery
- jquery新增或者刪除select下拉選單項程式碼jQuery
- 滑鼠懸浮出現下拉選單程式碼例項
- css水平下拉導航選單程式碼例項CSS
- select下拉選單跳轉效果程式碼
- 滑鼠虛滑過選項卡切換效果程式碼例項
- 選中select下拉選單項提交表單
- css三級下拉導航選單程式碼例項CSS
- jQuery tab選項卡效果程式碼例項jQuery
- select下拉選單新增不重複項
- jQuery設定select選中項程式碼例項jQuery
- CSS3實現的美觀多級下拉選單效果程式碼例項CSSS3
- tab選項卡切換例項程式碼
- JavaScript多級選項卡效果程式碼例項JavaScript
- 更換select箭頭程式碼例項
- js選項卡簡單程式碼例項JS
- js左右滑動選項卡效果程式碼例項JS