JS動態(tài)的把左邊列表添加到右邊的實(shí)現(xiàn)代碼(可上下移動)
廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"></style> <script type="text/javascript"></script> <META NAME="Description" CONTENT="Power by hill"> </head> <body> <p>選定一項(xiàng)或多項(xiàng)然后點(diǎn)擊添加或移除(按住shift或ctrl可以多選),或在選擇項(xiàng)上雙擊進(jìn)行添加和移除。</p> <form method="post" name="myform"> <table border="0" width="300"> <tr> <td width="40%"> <select style="WIDTH:100%" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="山東">山東</option> <option value="安徽">安徽</option> <option value="重慶">重慶</option> <option value="福建">福建</option> <option value="甘肅">甘肅</option> <option value="廣東">廣東</option> <option value="廣西">廣西</option> <option value="貴州">貴州</option> <option value="海南">海南</option> <option value="河北">河北</option> <option value="黑龍江">黑龍江</option> </select> </td> <td width="20%" align="center"> <input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)"> <br/> <br/> <input type="button" value="刪除" onclick="moveOption(document.myform.list2, document.myform.list1)"> </td> <td width="40%"> <select style="WIDTH:100%" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)"> </select> </td> <td> <button onclick="changepos(list2,-1)" type="button">上移</button> <br/> <button onclick="changepos(list2,1)" type="button">下移</button> </td> </tr> </table> 值:<input type="text" name="city" size="40"> </form> <script language="JavaScript"> function moveOption(e1, e2){ try{ for(var i=0;i<e1.options.length;i++){ if(e1.options[i].selected){ var e = e1.options[i]; e2.options.add(new Option(e.text, e.value)); e1.remove(i); ii=i-1 } } document.myform.city.value=getvalue(document.myform.list2); } catch(e){} } function getvalue(geto){ var allvalue = ""; for(var i=0;i<geto.options.length;i++){ allvalue +=geto.options[i].value + ","; } return allvalue; } function changepos(obj,index) { if(index==-1){ if (obj.selectedIndex>0){ obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1)) } } else if(index==1){ if (obj.selectedIndex<obj.options.length-1){ obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1)) } } } </script> </body> </html>
好了,代碼到此介紹,以上所述是小編給大家介紹的JS動態(tài)的把左邊列表添加到右邊的實(shí)現(xiàn)代碼(可上下移動),希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時(shí)回復(fù)大家的!
- vue.js給動態(tài)綁定的radio列表做批量編輯的方法
- Vue.js Ajax動態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法
- JavaScript實(shí)現(xiàn)動態(tài)刪除列表框值的方法
- javascript實(shí)現(xiàn)dom動態(tài)創(chuàng)建省市縱向列表菜單的方法
- JavaScript實(shí)現(xiàn)向OL列表內(nèi)動態(tài)添加LI元素的方法
- javascript為下拉列表動態(tài)添加數(shù)據(jù)項(xiàng)
- extjs 列表框(multiselect)的動態(tài)添加列表項(xiàng)的方法
- JS 動態(tài)添加列表框項(xiàng)效果代碼
- JS如何生成動態(tài)列表
相關(guān)文章
基于JavaScript實(shí)現(xiàn)圖片連播和聯(lián)級菜單實(shí)例代碼
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)圖片連播和聯(lián)級菜單實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-07-07JavaScript中this的四個(gè)綁定規(guī)則總結(jié)
相信大家都知道,ES5及之前時(shí)代的JavaScript中this的綁定機(jī)制是讓很多開發(fā)者頭疼不已的事情。this 的綁定變化多端,讓筆者也吃了不少虧。所以本文總結(jié)了this的四條綁定規(guī)則,在此記錄,以防自己遺忘,也方便他人參考借鑒。下面來一起看看吧。2016-09-09JavaScript直接調(diào)用函數(shù)與call調(diào)用的區(qū)別實(shí)例分析
這篇文章主要介紹了JavaScript直接調(diào)用函數(shù)與call調(diào)用的區(qū)別,結(jié)合額實(shí)例形式分析了JavaScript直接調(diào)用函數(shù)與call調(diào)用的基本用法、區(qū)別及相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05xmlplus組件設(shè)計(jì)系列之圖標(biāo)(ICON)(1)
這篇文章主要為大家詳細(xì)介紹了xmlplus組件設(shè)計(jì)系列之圖標(biāo)ICON的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05JavaScript 函數(shù)式編程實(shí)踐(來自IBM)
說到函數(shù)式編程,人們的第一印象往往是其學(xué)院派,晦澀難懂,大概只有那些蓬頭散發(fā),不修邊幅,甚至有些神經(jīng)質(zhì)的大學(xué)教授們才會用的編程方式。2010-06-06JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組
Array filter() 方法會跳過稀疏數(shù)組中缺少的元素,它的返回?cái)?shù)組總是稠密的。這篇文章給大家介紹了JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組的相關(guān)知識,需要的朋友參考下2018-02-02javascript中callee與caller的用法和應(yīng)用場景
javascript中callee和caller的用法和應(yīng)用場景分析,需要的朋友可以參考下。2010-12-12