點選左右箭頭可以移動選項例項程式碼
大家可能都見過這樣的效果功能,點選左右箭頭,可以將選中的項在左右列表相互移動,下面就童工程式碼例項簡單介紹意下如何實現此效果,希望給需要的朋友帶來一定的幫助,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> select{width:50px;} </style> <script type="text/javascript"> function moveAllOptions(selone,seltwo) { var opts=selone.getElementsByTagName('option'); for(var i=opts.length-1;i>=0;i--) { seltwo.appendChild(opts[i]); } } function moveSelectedOptions(selone,seltwo) { var opts=selone.getElementsByTagName('option'); for(var i=opts.length-1;i>=0;i--) { if(opts[i].selected==true) { seltwo.appendChild(opts[i]); } } } window.onload=function(){ var dRight=document.getElementById("dRight"); var right=document.getElementById("right"); var left=document.getElementById("left"); var dLeft=document.getElementById("dLeft"); var first=document.getElementById("first"); var second=document.getElementById("second"); dRight.onclick=function(){moveAllOptions(first,second);} right.onclick=function(){moveSelectedOptions(first,second);} left.onclick=function(){moveSelectedOptions(second,first);} dLeft.onclick=function(){moveAllOptions(first,second);} } </script> </head> <body> <select id="first" multiple="multiple"> <option>新增</option> <option>修改</option> <option>刪除</option> <option>儲存</option> </select> <input type="button" name="name" id="dRight" value=">>"/> <input type="button" name="name" id="right" value=">" /> <input type="button" name="name" id="left" value="<"/> <input type="button" name="name" id="dLeft" value="<<"/> <select id="second" multiple="multiple"> </select> </body> </html>
以上程式碼實現了我們想要的功能,點選按鈕可以實現選項的移動功能,至於排版問題這裡就不太關注了,下面介紹一下實現過程:
一.實現原理:
原理其實非常的簡單,就是使用appendChild()函式來移動元素,大家要注意此函式是移動,而不是複製一個副本再新增給指定元素。
相關閱讀:
1.appendChild()函式可以參閱js createElement()和appendChild()一章節。
2.javascript操作select可以參閱javascript動態建立select下拉選單一章節。
相關文章
- js左右滑動選項卡效果程式碼例項JS
- 按住滑鼠可以拖動箭頭旋轉程式碼例項
- js內容左右滑動切換的選項卡程式碼例項JS
- 替換預設select下拉選單箭頭程式碼例項
- CSS空心箭頭程式碼例項CSS
- 點選標題可以展開效果程式碼例項
- 移動端點選彈出提示視窗程式碼例項
- JavaScript點選投票效果程式碼例項JavaScript
- canvas繪製箭頭效果程式碼例項Canvas
- 更換select箭頭程式碼例項
- jQuery選項卡例項程式碼jQuery
- 手機移動端點選超連結既可以撥打電話程式碼例項
- js實現的可以通用的選項卡程式碼例項JS
- jQuery點選滑出層效果程式碼例項jQuery
- 點選返回上一頁程式碼例項
- 點選連結不跳轉例項程式碼
- jQuery點選回車事件程式碼例項jQuery事件
- 點選刪除表格行程式碼例項行程
- JavaScript 點選複製選中文字程式碼例項JavaScript
- 點選獲取焦點可以伸縮的搜尋框程式碼例項
- 點選可以展開和關閉的搜尋框程式碼例項
- 純css tab選項卡程式碼例項CSS
- jQuery tab選項卡效果程式碼例項jQuery
- js選項卡簡單程式碼例項JS
- 原生js tab選項卡程式碼例項JS
- tab選項卡切換例項程式碼
- 點選彈出鎖屏層例項程式碼
- js模擬點選連結程式碼例項JS
- 點選彈出半透明層程式碼例項
- jQuery點選展開收起程式碼例項jQuery
- javascript 點選回車相當於點選按鈕程式碼例項JavaScript
- 使用點陣圖選單項——點陣圖選單項例項 (轉)
- js點選文字框選中文字效果程式碼例項JS
- css點選附近文字選中核取方塊程式碼例項CSS
- JavaScript多級選項卡效果程式碼例項JavaScript
- css三角形箭頭程式碼例項CSS
- 點選實現顯示密碼效果程式碼例項密碼
- zepto點選檢視密碼明文效果程式碼例項密碼