列表之间内容相互移动,列表添加元素

<!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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值