js簡單實現(xiàn)Select互換數(shù)據(jù)的方法
更新時間:2015年08月17日 10:56:30 作者:企鵝
這篇文章主要介紹了js簡單實現(xiàn)Select互換數(shù)據(jù)的方法,涉及javascript動態(tài)操作select中option節(jié)點的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了js簡單實現(xiàn)Select互換數(shù)據(jù)的方法。分享給大家供大家參考。具體如下:
這里基于javascript實現(xiàn)兩個Select互換數(shù)據(jù),簡單實用,大家都見到過的,不多說了,即使手頭暫時用不上,收藏起來,以備后用。
運行效果如下圖所示:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-select-cha-data-codes/
具體代碼如下:
<title>兩個Select互換數(shù)據(jù),簡單實用</title> <script language="JavaScript"> var MainSel = null; var SlaveSel = null; var Item_org = new Array();function DoAdd(){ var this_sel = null; for(var i=0;i<MainSel.options.length;i++){ this_sel = MainSel.options[i]; if(this_sel.selected){ SlaveSel.appendChild(this_sel); i--; } } sort_Main(SlaveSel); }function DoDel(){ var this_sel = null; for(var i=0;i<SlaveSel.options.length;i++){ this_sel = SlaveSel.options[i]; if(this_sel.selected){ MainSel.appendChild(this_sel); i--; } } sort_Main(MainSel); }function sort_Main(the_Sel){ var this_sel = null; for(var i=0;i<Item_org.length;i++){ for(var j=0;j<the_Sel.options.length;j++){ this_sel = the_Sel.options[j]; if(this_sel.value==Item_org[i][0] && this_sel.text==Item_org[i][1]){ the_Sel.appendChild(this_sel); } } } }window.onload=function(){ MainSel = select1; SlaveSel = select2; MainSel.ondblclick=DoAdd; SlaveSel.ondblclick=DoDel; var this_sel = null; for(var i=0;i<MainSel.options.length;i++){ this_sel = MainSel.options[i]; Item_org.push(new Array(this_sel.value,this_sel.text)); } } </script> <table width="300" border="0" cellspacing="0" cellpDoAdding="0" align="center"> <tr> <td width="45%" align="center"> <select id="select1" size="5" multiple style="width: 100px"> <option value="111">111</option> <option value="222">222</option> <option value="333">333</option> <option value="444">444</option> <option value="555">555</option> <option value="666">666</option> </select> </td> <td width="10%" align="center"> <input name="DoAdd" type="button" value=">>" onClick="DoAdd()"><br> <input name="DoDel" type="button" value="<<" onClick="DoDel()"> </td> <td width="45%" align="center"> <select id="select2" size="5" multiple style="width: 100px"> </select> </td> </tr> </table>
希望本文所述對大家的javascript程序設計有所幫助。
您可能感興趣的文章:
- js添加select下默認的option的value和text的方法
- js實現(xiàn)select跳轉功能代碼
- JS簡單操作select和dropdownlist實例
- JS實現(xiàn)網(wǎng)頁背景顏色與select框中顏色同時變化的方法
- js給selected添加options的方法
- js實現(xiàn)Select列表各項上移和下移的方法
- JS實現(xiàn)的5級聯(lián)動Select下拉選擇框實例
- js實現(xiàn)Select頭像選擇實時預覽代碼
- js實現(xiàn)帶有介紹的Select列表菜單實例
- js實現(xiàn)Select列表內容自動滾動效果代碼
- JS實現(xiàn)的Select三級下拉菜單代碼
- js實現(xiàn)select跳轉菜單新窗口效果代碼分享
相關文章
一文搞懂JSON(JavaScript Object Notation)
Json 有兩種基本的結構,即 Json對象 和 Json 數(shù)組。通過 Json 對象和 Json 數(shù)組這兩種結構的組合可以表示各種復雜的結構,今天通過本文給大家介紹JavaScript Object Notation的基本知識,感興趣的朋友一起看看吧2021-10-10JS PHP字符串截取函數(shù)實現(xiàn)原理解析
這篇文章主要介紹了JS PHP字符串截取函數(shù)實現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08