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>
