JavaScript Select和Option列表元素上下左右移动

作者马嘉楠

<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Author" CONTENT="majianan"> <script language="javascript" > var currentSel = null; function move（）{ if（arguments.length==1）{ moveUp（arguments[0]）; }else if（arguments.length==2）{ moveRight（arguments[0],arguments[1]）; } } function moveUp（direction）{ if（currentSel == null） return; var index = currentSel.selectedIndex; if（direction）{//up if（index==0） return; var value = currentSel.options[index-1].value; var text = currentSel.options[index-1].text; currentSel.options[index-1].value = currentSel.options[index].value; currentSel.options[index-1].text = currentSel.options[index].text; currentSel.options[index].value = value; currentSel.options[index].text = text; currentSel.options[index].selected = false; currentSel.options[index-1].selected = true; }else{//down if（index==（currentSel.length-1）） return; var value = currentSel.options[index+1].value; var text = currentSel.options[index+1].text; currentSel.options[index+1].value = currentSel.options[index].value; currentSel.options[index+1].text = currentSel.options[index].text; currentSel.options[index].value = value; currentSel.options[index].text = text; currentSel.options[index].selected = false; currentSel.options[index+1].selected = true; } } function moveRight（src,des）{ if（src.selectedIndex==-1）{ alert（"Please select first！"）; return; } for（var i=0;i<src.length;i++）{ if（src[i].selected）{ var op = document.createElement（"option"）; op.value = src.options[src.selectedIndex].value; op.text = src.options[src.selectedIndex].text; des.options.add（op）; src.remove（i）; i--; } } } function setButton（obj）{ if（obj.length==0） return; currentSel = obj; if（obj.id=="leftSel"）{ document.getElementById（"btnLeft"）.disabled = true; document.getElementById（"btnRight"）.disabled = false; reSelect（document.getElementById（"rightSel"））; }else{ document.getElementById（"btnLeft"）.disabled = false; document.getElementById（"btnRight"）.disabled = true; reSelect（document.getElementById（"leftSel"））; } } function reSelect（obj）{ for（var i=0; i<obj.length; i++）{ if（obj[i].selected） obj[i].selected = false; } } </script> </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需刷新才能执行]