<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<form method="post" name="myform">
<table border="0" width="300">
<tr>
<td width=400>
<b>待选名单</b>
<select style="width:100%" multiple name="list1" size="12" οndblclick="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/>
<input type="button" value="<<" onClick="moveOption(document.myform.list2, document.myform.list1)"><br/>
<input type="button" value="删除" onClick="deleteOption(document.myform.list1,document.myform.list2)">
</td>
<td width=400>
<b>已选名单</b>
<select style="width:100%" multiple name="list2" size="12" οndblclick="moveOption(document.myform.list2, document.myform.list1)">
</select>
</td>
</tr>
<tr>
<td colspan="3">
<h2 align="center">已选名单显示</h2>
</td>
</tr>
<tr>
<td colspan="3">
<textarea name="student" cols="80">
</textarea>
</td>
</tr>
<tr>
<td colspan="3">
<h2 align="center">添加待选人</h2>
</td>
</tr>
<tr>
<td colspan="3">
<textarea name="student1" cols="80">
</textarea>
</td>
</tr>
<tr >
<td colspan="3"><center><button type="button" οnclick="addOption(document.myform.list1)">添加</button></center></td>
</tr>
</table>
</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);
}
}
document.myform.student.value=getvalue(document.myform.list2);
}
catch(e){}
}
function getvalue(geto){
var allvalue = "";
for(var i=0;i<geto.options.length-1;i++){
allvalue +=geto.options[i].value + ",";
}
allvalue+=geto.options[geto.options.length-1].value;
return allvalue;
}
function addOption(e1){
try{
var strs= new Array(); //定义一数组
var length=e1.options.length;
strs=document.myform.student1.value.toString().split(","); //字符分割
for(var i=0;i<strs.length;i++){
e1.options.add(new Option(strs[i],strs[i]));
}
}
catch(e){}
}
function deleteOption(e1, e2){
try{
for(var i=0;i<e1.options.length;i++){
if(e1.options[i].selected){
e1.remove(i);
}
}
for(var i1=0;i1<e2.options.length;i1++){
if(e2.options[i1].selected){
e2.remove(i1);
}
}
document.myform.student.value=getvalue(document.myform.list2);
}
catch(e){}
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<form method="post" name="myform">
<table border="0" width="300">
<tr>
<td width=400>
<b>待选名单</b>
<select style="width:100%" multiple name="list1" size="12" οndblclick="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/>
<input type="button" value="<<" onClick="moveOption(document.myform.list2, document.myform.list1)"><br/>
<input type="button" value="删除" onClick="deleteOption(document.myform.list1,document.myform.list2)">
</td>
<td width=400>
<b>已选名单</b>
<select style="width:100%" multiple name="list2" size="12" οndblclick="moveOption(document.myform.list2, document.myform.list1)">
</select>
</td>
</tr>
<tr>
<td colspan="3">
<h2 align="center">已选名单显示</h2>
</td>
</tr>
<tr>
<td colspan="3">
<textarea name="student" cols="80">
</textarea>
</td>
</tr>
<tr>
<td colspan="3">
<h2 align="center">添加待选人</h2>
</td>
</tr>
<tr>
<td colspan="3">
<textarea name="student1" cols="80">
</textarea>
</td>
</tr>
<tr >
<td colspan="3"><center><button type="button" οnclick="addOption(document.myform.list1)">添加</button></center></td>
</tr>
</table>
</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);
}
}
document.myform.student.value=getvalue(document.myform.list2);
}
catch(e){}
}
function getvalue(geto){
var allvalue = "";
for(var i=0;i<geto.options.length-1;i++){
allvalue +=geto.options[i].value + ",";
}
allvalue+=geto.options[geto.options.length-1].value;
return allvalue;
}
function addOption(e1){
try{
var strs= new Array(); //定义一数组
var length=e1.options.length;
strs=document.myform.student1.value.toString().split(","); //字符分割
for(var i=0;i<strs.length;i++){
e1.options.add(new Option(strs[i],strs[i]));
}
}
catch(e){}
}
function deleteOption(e1, e2){
try{
for(var i=0;i<e1.options.length;i++){
if(e1.options[i].selected){
e1.remove(i);
}
}
for(var i1=0;i1<e2.options.length;i1++){
if(e2.options[i1].selected){
e2.remove(i1);
}
}
document.myform.student.value=getvalue(document.myform.list2);
}
catch(e){}
}
</script>
</body>
</html>