资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
JavaScript Select和Option列表元素上下左右移动
作者 马嘉楠
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Author" CONTENT="majianan"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%20%3E%20%0D%0Avar%20currentSel%20%3D%20null%3B%20%0D%0Afunction%20move()%7B%20%0D%0Aif(arguments.length%3D%3D1)%7B%20%0D%0AmoveUp(arguments%5B0%5D)%3B%20%0D%0A%7Delse%20if(arguments.length%3D%3D2)%7B%20%0D%0AmoveRight(arguments%5B0%5D%2Carguments%5B1%5D)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20moveUp(direction)%7B%20%0D%0Aif(currentSel%20%3D%3D%20null)%20return%3B%20%0D%0Avar%20index%20%3D%20currentSel.selectedIndex%3B%20%0D%0Aif(direction)%7B%2F%2Fup%20%0D%0Aif(index%3D%3D0)%20return%3B%20%0D%0A%0D%0Avar%20value%20%3D%20currentSel.options%5Bindex-1%5D.value%3B%20%0D%0Avar%20text%20%3D%20currentSel.options%5Bindex-1%5D.text%3B%20%0D%0A%0D%0AcurrentSel.options%5Bindex-1%5D.value%20%3D%20currentSel.options%5Bindex%5D.value%3B%20%0D%0AcurrentSel.options%5Bindex-1%5D.text%20%3D%20currentSel.options%5Bindex%5D.text%3B%20%0D%0A%0D%0AcurrentSel.options%5Bindex%5D.value%20%3D%20value%3B%20%0D%0AcurrentSel.options%5Bindex%5D.text%20%3D%20text%3B%20%0D%0A%0D%0AcurrentSel.options%5Bindex%5D.selected%20%3D%20false%3B%20%0D%0AcurrentSel.options%5Bindex-1%5D.selected%20%3D%20true%3B%20%0D%0A%7Delse%7B%2F%2Fdown%20%0D%0Aif(index%3D%3D(currentSel.length-1))%20return%3B%20%0D%0A%0D%0Avar%20value%20%3D%20currentSel.options%5Bindex%2B1%5D.value%3B%20%0D%0Avar%20text%20%3D%20currentSel.options%5Bindex%2B1%5D.text%3B%20%0D%0A%0D%0AcurrentSel.options%5Bindex%2B1%5D.value%20%3D%20currentSel.options%5Bindex%5D.value%3B%20%0D%0AcurrentSel.options%5Bindex%2B1%5D.text%20%3D%20currentSel.options%5Bindex%5D.text%3B%20%0D%0A%0D%0AcurrentSel.options%5Bindex%5D.value%20%3D%20value%3B%20%0D%0AcurrentSel.options%5Bindex%5D.text%20%3D%20text%3B%20%0D%0A%0D%0AcurrentSel.options%5Bindex%5D.selected%20%3D%20false%3B%20%0D%0AcurrentSel.options%5Bindex%2B1%5D.selected%20%3D%20true%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20moveRight(src%2Cdes)%7B%20%0D%0Aif(src.selectedIndex%3D%3D-1)%7B%20%0D%0Aalert(%22Please%20select%20first!%22)%3B%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0Afor(var%20i%3D0%3Bi%3Csrc.length%3Bi%2B%2B)%7B%20%0D%0Aif(src%5Bi%5D.selected)%7B%20%0D%0Avar%20op%20%3D%20document.createElement(%22option%22)%3B%20%0D%0Aop.value%20%3D%20src.options%5Bsrc.selectedIndex%5D.value%3B%20%0D%0Aop.text%20%3D%20src.options%5Bsrc.selectedIndex%5D.text%3B%20%0D%0Ades.options.add(op)%3B%20%0D%0Asrc.remove(i)%3B%20%0D%0Ai--%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20setButton(obj)%7B%20%0D%0Aif(obj.length%3D%3D0)%20return%3B%20%0D%0AcurrentSel%20%3D%20obj%3B%20%0D%0Aif(obj.id%3D%3D%22leftSel%22)%7B%20%0D%0Adocument.getElementById(%22btnLeft%22).disabled%20%3D%20true%3B%20%0D%0Adocument.getElementById(%22btnRight%22).disabled%20%3D%20false%3B%20%0D%0A%0D%0AreSelect(document.getElementById(%22rightSel%22))%3B%20%0D%0A%7Delse%7B%20%0D%0Adocument.getElementById(%22btnLeft%22).disabled%20%3D%20false%3B%20%0D%0Adocument.getElementById(%22btnRight%22).disabled%20%3D%20true%3B%20%0D%0A%0D%0AreSelect(document.getElementById(%22leftSel%22))%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20reSelect(obj)%7B%20%0D%0Afor(var%20i%3D0%3B%20i%3Cobj.length%3B%20i%2B%2B)%7B%20%0D%0Aif(obj%5Bi%5D.selected)%20obj%5Bi%5D.selected%20%3D%20false%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </HEAD> <BODY> <form id="form1"> <table width="40%" align="center"> <tr> <td> <input type="button" value=" Up " id="btnUp" onClick="move(true);" style="width:65"/> <input type="button" value=" Down " id="btnDowm" onClick="move(false);" style="width:65" /> </td> <td> <select multiple id="leftSel" onclick="setButton(this)" style="height:200px;width:100px;"> <option value="1">Java</option> <option value="2">JavaScript</option> <option value="3">C++</option> <option value="4">HTML</option> </select> </td> <td> <input type="button" value=" >> " id="btnRight" onClick="move(document.getElementById('leftSel'),document.getElementById('rightSel'));" style="width:65" /> <input type="button" value=" << " id="btnLeft" onClick="move(document.getElementById('rightSel'),document.getElementById('leftSel'));" style="width:65" /> </td> <td> <select multiple id="rightSel" onclick="setButton(this)" style="height:200px;width:100px;" > <option value="5">CSS</option> <option value="6">.Net</option> </select> </td> </tr> </table> </form> </BODY> </HTML>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程
