页面导航：首页 → 网络编程 → JavaScript → 表单特效 → 正文内容

项目添加

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!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=gb2312" /> 
<title>Untitled Document</title> 
<script language="javascript"> 
function addItem(objForm) 
 { 
  var valueAry=new Array(); 
  var textAry=new Array(); 
  var leftElement=objForm.elements["left"]; 
  var rightElement=objForm.elements["right"]; 
  var count=0; 
  var i,j,k,flag; 
  for(i=0;i<leftElement.options.length;i++) 
  { 
   if(leftElement.options[i].selected) 
   {valueAry[count]=leftElement.options[i].value; 
    textAry[count]=leftElement.options[i].text; 
    count++; 
   } 
  } 
  var count1=rightElement.options.length; 
  count1=count1>0?count1:0; 
  for(j=0;j<count;j++) 
  { 
   flag=false; 
   for(k=0;k<count1;k++) 
   { 
    if(rightElement.options[k].text==textAry[j]) 
    flag=true; 
   } 
   if(!flag) 
  { 
    rightElement.options[count1]=new Option(textAry[j],valueAry[j]); 
    count1++; 
    } 
  } 
 } 
function subItem(objForm) 
 { 
  var i; 
  var objElement=objForm.elements["right"]; 
  for(i=objElement.options.length-1;i>=0;i--) 
  { 
   if(objElement.options[i].selected) 
    objElement.options[i]=null; 
  } 
 } 
function addAllItem(objForm) 
 { 
  var i; 
  var leftElement=objForm.elements["left"]; 
  for(i=0;i<leftElement.options.length;i++) 
  { 
   leftElement.options[i].selected=true; 
  } 
  addItem(objForm); 
 } 
function subAllItem(objForm) 
 { 
  var i; 
  var rightElement=objForm.elements["right"]; 
  for(i=0;i<rightElement.options.length;i++) 
  rightElement.options[i].selected=true; 
  subItem(objForm); 
 } 
</script> 
</head> 
<body> 
<table width="200" cellpadding="0" cellspacing="0" border="0"> 
<form> 
 <tr> 
  <td width="80" rowspan="4"><select name="left"  style="width:80px;height:100px;" multiple> 
    <option>ITEM1</option> 
    <option>ITEM2</option> 
    <option>ITEM3</option> 
    <option>ITEM4</option> 
    <option>ITEM5</option> 
    <option>ITEM6</option> 
  </select></td> 
 <td width="40" height="20" align="center"><input type="button" value="  >> " onclick="addItem(this.form);"></td> 
  <td width="80" rowspan="4" align="right"> 
 <select name="right"  style="width:80px;height:100px;" multiple> 
 </select> </td> 
 </tr> 
 <tr> 
  <td width="40" align="center"><input type="button" value=" <<  " onclick="subItem(this.form)"></td> 
 </tr> 
 <tr> 
  <td width="40" align="center"><input type="button" value="ALL>>" onclick="addAllItem(this.form)"></td> 
 </tr> 
 <tr> 
  <td width="40" align="center"><input type="button" value="<<ALL" onclick="subAllItem(this.form)"></td> 
 </tr> 
</form> 
</tr> 
</table> 
</body> 
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：项目添加

百度中搜索更多的关于项目添加内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

文章评论

共有位脚本之家网友发表了评论我来说两句

项目添加

文章评论

同类文章

最近更新

热点排行

项目添加

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行