js簡(jiǎn)單實(shí)現(xiàn)Select互換數(shù)據(jù)的方法
本文實(shí)例講述了js簡(jiǎn)單實(shí)現(xiàn)Select互換數(shù)據(jù)的方法。分享給大家供大家參考。具體如下:
這里基于javascript實(shí)現(xiàn)兩個(gè)Select互換數(shù)據(jù),簡(jiǎn)單實(shí)用,大家都見(jiàn)到過(guò)的,不多說(shuō)了,即使手頭暫時(shí)用不上,收藏起來(lái),以備后用。
運(yùn)行效果如下圖所示:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-select-cha-data-codes/
具體代碼如下:
<title>兩個(gè)Select互換數(shù)據(jù),簡(jiǎn)單實(shí)用</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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- js添加select下默認(rèn)的option的value和text的方法
- js實(shí)現(xiàn)select跳轉(zhuǎn)功能代碼
- JS簡(jiǎn)單操作select和dropdownlist實(shí)例
- JS實(shí)現(xiàn)網(wǎng)頁(yè)背景顏色與select框中顏色同時(shí)變化的方法
- js給selected添加options的方法
- js實(shí)現(xiàn)Select列表各項(xiàng)上移和下移的方法
- JS實(shí)現(xiàn)的5級(jí)聯(lián)動(dòng)Select下拉選擇框?qū)嵗?/a>
- js實(shí)現(xiàn)Select頭像選擇實(shí)時(shí)預(yù)覽代碼
- js實(shí)現(xiàn)帶有介紹的Select列表菜單實(shí)例
- js實(shí)現(xiàn)Select列表內(nèi)容自動(dòng)滾動(dòng)效果代碼
- JS實(shí)現(xiàn)的Select三級(jí)下拉菜單代碼
- js實(shí)現(xiàn)select跳轉(zhuǎn)菜單新窗口效果代碼分享
相關(guān)文章
一文搞懂JSON(JavaScript Object Notation)
Json 有兩種基本的結(jié)構(gòu),即 Json對(duì)象 和 Json 數(shù)組。通過(guò) Json 對(duì)象和 Json 數(shù)組這兩種結(jié)構(gòu)的組合可以表示各種復(fù)雜的結(jié)構(gòu),今天通過(guò)本文給大家介紹JavaScript Object Notation的基本知識(shí),感興趣的朋友一起看看吧2021-10-10dedecms頁(yè)面如何獲取會(huì)員狀態(tài)的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇dedecms頁(yè)面如何獲取會(huì)員狀態(tài)的實(shí)例代碼。一起跟隨小編過(guò)來(lái)看看吧,希望對(duì)大家有所幫助。2016-03-03手機(jī)端實(shí)現(xiàn)Bootstrap簡(jiǎn)單圖片輪播效果
這篇文章主要為大家詳細(xì)介紹了基于Bootstrap的簡(jiǎn)單輪播圖的手機(jī)實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10JavaScript中實(shí)現(xiàn)塊作用域的方法
在Javascript中由于沒(méi)有作用域的概念,所以很容易發(fā)生標(biāo)識(shí)符名稱的沖突,尤其是在比較大的項(xiàng)目中,這類情況更容易發(fā)生2010-04-04JS PHP字符串截取函數(shù)實(shí)現(xiàn)原理解析
這篇文章主要介紹了JS PHP字符串截取函數(shù)實(shí)現(xiàn)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08js實(shí)現(xiàn)帶按鈕的上下滾動(dòng)效果
這篇文章主要介紹了js實(shí)現(xiàn)帶按鈕的上下滾動(dòng)效果,設(shè)計(jì)javascript鼠標(biāo)事件及頁(yè)面元素樣式的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05微信小程序商城項(xiàng)目之側(cè)欄分類效果(1)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)商城系列之側(cè)欄分類效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04