Javascript 实现双栏选择框
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">function onloadTask(){var taskListObj="[{'taskName':'A',taskId:'1'},{'taskName':'B',taskId:'2'},{'taskName':'C',taskId:'3'},{'taskName':'D',taskId:'4'},{'taskName':'E',taskId:'5'},{'taskName':'F',taskId:'6'},{'taskName':'G',taskId:'7'},{'taskName':'H',taskId:'9'},{'taskName':'M',taskId:'10'}]";var taskList=eval(taskListObj);var leftTaskList=document.getElementById("leftTaskList")for(var index=0;index<taskList.length;index++){ leftTaskList.options.add(new Option(taskList[index].taskName,taskList[index].taskId));}}function move_right(){ var leftTaskListSelect=document.getElementById("leftTaskList"); var leftSelectedIndex=leftTaskListSelect.selectedIndex; var rightTaskList=document.getElementById("rightTaskList") if(leftSelectedIndex>= 0){ rightTaskList.options.add(new Option(leftTaskListSelect.options[leftSelectedIndex].text, leftTaskListSelect.options[leftSelectedIndex].value)); leftTaskListSelect.options.remove(leftSelectedIndex); }else { alert('请选择一个前置任务！'); }}function move_left(){ var leftTaskList=document.getElementById("leftTaskList"); var rightTaskListSelect=document.getElementById("rightTaskList"); var rightSelectedIndex=rightTaskListSelect.selectedIndex; if(rightSelectedIndex>= 0){ leftTaskList.options.add(new Option(rightTaskListSelect.options[rightSelectedIndex].text, rightTaskListSelect.options[rightSelectedIndex].value)); rightTaskListSelect.options.remove(leftSelectedIndex); }else { alert('请选择一个前置任务！'); }}function move_left_all(){ var rightTaskList=document.getElementById("rightTaskList"); var leftTaskList=document.getElementById("leftTaskList") for (var i=0; i<rightTaskList.options.length; i++) {leftTaskList.add(new Option(rightTaskList.options[i].text, rightTaskList.options[i].value)); } rightTaskList.length = 0;}function move_right_all(){ var rightTaskList=document.getElementById("rightTaskList"); var leftTaskList=document.getElementById("leftTaskList") for (var i=0; i<leftTaskList.options.length; i++) {rightTaskList.add(new Option(leftTaskList.options[i].text, leftTaskList.options[i].value)); } leftTaskList.length = 0;}</script></head><body onload="onloadTask();"><form action="post" name="taskform" id="taskform"> <table> <tbody> <tr> <td> <select id="leftTaskList" multiple="multiple" size="15"> </select> </td> <td> <table> <tr><td> <input type="button" onclick="move_right();" id="left2right" value="> " size="15" /></td></tr> <tr><td> <input type="button" onclick="move_left();" id="right2left" value="< " /></td></tr> <tr><td> <input type="button" onclick="move_right_all();" id="left2rightAll" value=">>" /></td></tr> <tr><td> <input type="button" onclick="move_left_all();" id="right2leftAll" value="<<" /></td></tr> </table> </td> <td> <select id="rightTaskList" multiple="multiple" size="15"> </select> </td> </tr> </tbody> </table> </form></body></html>
?
