列表中项的自由加减实现的例子

<div align=center>
<form>
  <table align=center bgcolor="#e0e0e0" width=600 border=0 cellpadding=0 cellspacing=0>
<tr><td height=4></td></tr>
<tr><td> 待选择的部门列表：</td><td></td><td> 已选择的部门列表：</td></tr>

<tr><td>

<select name="CanSel" size="24" style="background-color: #ffffff; word-spacing: 0;width:300" multiple ondblclick="AddOne();">
   
     <option value="'N900'">安技环保部</option>
   
     <option value="'1600'">安技环保处</option>
       
     <option value="'9400'">报社</option>
      
     <option value="'C300'">采购部</option>
           
     <option value="'N000'">厂长办公室</option>
       
     <option value="'3220'">冲压厂技术科</option>
   
     <option value="'2000'">党委办公室</option>
   
     <option value="'D200'">党委宣传部</option>
       
     <option value="'D100'">党委组织部</option>
   
     <option value="'2400'">党校</option>
   
     <option value="'3500'">第二车体厂</option>
       
     <option value="'4300'">第二装配厂</option>
       
     <option value="'3A00'">第三装配厂</option>
   
     <option value="'3400'">第一车体厂</option>
   
     <option value="'3600'">第一装配厂</option>
       
     <option value="'4200'">电镀车间</option>
   
     <option value="'9500'">电视台</option>
       
     <option value="'E800'">动力厂</option>
   
     <option value="'4000'">锻工车间</option>
   
     <option value="'D400'">工会</option>
       
     <option value="'B000'">公司办公室</option>
       
     <option value="'B400'">计划财务部</option>
       
     <option value="'0700'">监察审计部</option>
      
     <option value="'6300'">进出口公司</option>
       
     <option value="'4100'">精铸车间</option>
       
     <option value="'N700'">离退休管理部</option>
       
     <option value="'E600'">木工厂</option>
               
     <option value="'C500'">品质保证部</option>
       
     <option value="'B100'">企业管理部</option>
   
     <option value="'B110'">信息中心</option>
       
     <option value="'B600'">企业文化部</option>
        
     <option value="'B300'">人力资源部</option>
       
     <option value="'N600'">社会工作部</option>
           
     <option value="'C400'">生产制造部</option>
           
     <option value="'C600'">市场二部</option>
   
     <option value="'C200'">市场一部</option>
   
     <option value="'2700'">团委</option>
   
     <option value="'C100'">研发中心</option>
   
     <option value="'0350'">职工培训中心</option>
   
     <option value="'1500'">质量保证部</option>
   
     <option value="'3000'">铸钢厂</option>
   
     <option value="'3300'">转向架厂</option>
   
     <option value="'N300'">资产管理部</option>
   
     <option value="'B800'">综合保障部</option>
   
     <option value="'2200'">组织部</option>
   
</select>
 </td>
 
 <td align=center width=40>
 <table width=100%>
 <tr><td align=center ><input type=button name="AddSel" value="＞" title="添加所选择的部门"></td></tr>
 <tr><td align=center ><input type=button name="AddAll" value="≥" title="添加所有的部门"></td></tr>
 <tr><td align=center ><input type=button name="DelSel" value="＜" title="删掉所选择的部门"></td></tr>
 <tr><td align=center ><input type=button name="DelAll" value="≤" title="删掉所有的部门"></td></tr>
 </table>
 
 </td>
 
 
 
 <td align=right>
 <select name="HaveSel" size="24" style="background-color: #ffffff; word-spacing: 0;width:300" multiple  ondblclick="DelOne();">

</select>
 </td></tr>
 </table></form>
 </div>
 
   
   <script language=javascript>
    var fldFrom=document.forms[0].CanSel;    //待选择单位列表
    var fldTo=document.forms[0].HaveSel;     //已添加单位列表

  //判断当前选择的是否已经添加了
  function isNotExist(oneStr,oneSel)
  {
    for(var i=0;i<oneSel.length;i++)
 {
    if (oneSel.options[i].text==oneStr)
    {
       return false;
       break;
      }
 }
 return true;
  }
 
  //添加选择的
  function AddSele()
  {
    for(var i=0;i<fldFrom.length;i++)
 {
    if (fldFrom.options[i].selected )
    {
      if (isNotExist(fldFrom.options[i].text,fldTo))
         {fldTo.options[fldTo.length] = new Option(fldFrom.options[i].text,fldFrom.options[i].value);
         }
          
      }
     
            fldFrom.options[i].selected=false;
     
 }
  }
 
 
   //删除选择的
  function DelSele()
  {
    for(var i=fldTo.length-1;i>=0;i--)
 {
    if (fldTo.options[i].selected )
    {
        fldTo.options[i] = null;
      }
 }
  }
 
  //添加所有的
  function AddAlle()
  {
    fldTo.length=0;
     for(var i=0;i<fldFrom.length;i++)
 {
  fldTo.options[fldTo.length] = new Option(fldFrom.options[i].text,fldFrom.options[i].value);
  fldFrom.options[i].selected=false;
 }
  }
 
 
 //添加一个（双击）
  function AddOne()
  {
   
  if (isNotExist(fldFrom.options[fldFrom.selectedIndex].text,fldTo))
  {fldTo.options[fldTo.length] = new Option(fldFrom.options[fldFrom.selectedIndex].text,fldFrom.options[fldFrom.selectedIndex].value);
  fldFrom.options[fldFrom.selectedIndex].selected=false;
  }
  }
 
 
 //删除所有
  function DelAlle()
  {
    fldTo.length=0;
  }
 
  //删除一个（双击）
  function DelOne()
  {
    fldTo.options[fldTo.selectedIndex]=null;
  }
 
  //进入前判断
 function goEnter()
 {
        if (fldTo.length==0)
         {
           alert("请选择至少一个部门！");
         }
        else
         {
              for(var i=0;i<fldTo.length;i++)
            {           
            fldTo.options[i].selected=true;
            }
             
     
               document.forms[0].submit();
          
           
           for(var i=0;i<fldTo.length;i++)
            {           
            fldTo.options[i].selected=false;
            }           
         }
 }
 

</script> 

<div align=center><form> <table align=center bgcolor="#e0e0e0" width=600 border=0 cellpadding=0 cellspacing=0><tr><td height=4></td></tr><tr><td> 待选择的部门列表：</td><td></td><td> 已选择的部门列表：</td></tr><tr><td><select name="CanSel" size="24" style="background-color: #ffffff; word-spacing: 0;width:300" multiple ondblclick="AddOne();"> <option value="'N900'">安技环保部</option> <option value="'1600'">安技环保处</option> <option value="'9400'">报社</option> <option value="'C300'">采购部</option> <option value="'N000'">厂长办公室</option> <option value="'3220'">冲压厂技术科</option> <option value="'2000'">党委办公室</option> <option value="'D200'">党委宣传部</option> <option value="'D100'">党委组织部</option> <option value="'2400'">党校</option> <option value="'3500'">第二车体厂</option> <option value="'4300'">第二装配厂</option> <option value="'3A00'">第三装配厂</option> <option value="'3400'">第一车体厂</option> <option value="'3600'">第一装配厂</option> <option value="'4200'">电镀车间</option> <option value="'9500'">电视台</option> <option value="'E800'">动力厂</option> <option value="'4000'">锻工车间</option> <option value="'D400'">工会</option> <option value="'B000'">公司办公室</option> <option value="'B400'">计划财务部</option> <option value="'0700'">监察审计部</option> <option value="'6300'">进出口公司</option> <option value="'4100'">精铸车间</option> <option value="'N700'">离退休管理部</option> <option value="'E600'">木工厂</option> <option value="'C500'">品质保证部</option> <option value="'B100'">企业管理部</option> <option value="'B110'">信息中心</option> <option value="'B600'">企业文化部</option> <option value="'B300'">人力资源部</option> <option value="'N600'">社会工作部</option> <option value="'C400'">生产制造部</option> <option value="'C600'">市场二部</option> <option value="'C200'">市场一部</option> <option value="'2700'">团委</option> <option value="'C100'">研发中心</option> <option value="'0350'">职工培训中心</option> <option value="'1500'">质量保证部</option> <option value="'3000'">铸钢厂</option> <option value="'3300'">转向架厂</option> <option value="'N300'">资产管理部</option> <option value="'B800'">综合保障部</option> <option value="'2200'">组织部</option> </select> </td> <td align=center width=40> <table width=100%> <tr><td align=center ><input type=button name="AddSel" value="＞" title="添加所选择的部门"></td></tr> <tr><td align=center ><input type=button name="AddAll" value="≥" title="添加所有的部门"></td></tr> <tr><td align=center ><input type=button name="DelSel" value="＜" title="删掉所选择的部门"></td></tr> <tr><td align=center ><input type=button name="DelAll" value="≤" title="删掉所有的部门"></td></tr> </table> </td> <td align=right> <select name="HaveSel" size="24" style="background-color: #ffffff; word-spacing: 0;width:300" multiple ondblclick="DelOne();"></select> </td></tr> </table></form> </div> <script language=javascript> var fldFrom=document.forms[0].CanSel; //待选择单位列表 var fldTo=document.forms[0].HaveSel; //已添加单位列表 //判断当前选择的是否已经添加了 function isNotExist(oneStr,oneSel) { for(var i=0;i<oneSel.length;i++) { if (oneSel.options[i].text==oneStr) { return false; break; } } return true; } //添加选择的 function AddSele() { for(var i=0;i<fldFrom.length;i++) { if (fldFrom.options[i].selected ) { if (isNotExist(fldFrom.options[i].text,fldTo)) {fldTo.options[fldTo.length] = new Option(fldFrom.options[i].text,fldFrom.options[i].value); } } fldFrom.options[i].selected=false; } } //删除选择的 function DelSele() { for(var i=fldTo.length-1;i>=0;i--) { if (fldTo.options[i].selected ) { fldTo.options[i] = null; } } } //添加所有的 function AddAlle() { fldTo.length=0; for(var i=0;i<fldFrom.length;i++) { fldTo.options[fldTo.length] = new Option(fldFrom.options[i].text,fldFrom.options[i].value); fldFrom.options[i].selected=false; } } //添加一个（双击） function AddOne() { if (isNotExist(fldFrom.options[fldFrom.selectedIndex].text,fldTo)) {fldTo.options[fldTo.length] = new Option(fldFrom.options[fldFrom.selectedIndex].text,fldFrom.options[fldFrom.selectedIndex].value); fldFrom.options[fldFrom.selectedIndex].selected=false; } } //删除所有 function DelAlle() { fldTo.length=0; } //删除一个（双击） function DelOne() { fldTo.options[fldTo.selectedIndex]=null; } //进入前判断 function goEnter() { if (fldTo.length==0) { alert("请选择至少一个部门！"); } else { for(var i=0;i<fldTo.length;i++) { fldTo.options[i].selected=true; } document.forms[0].submit(); for(var i=0;i<fldTo.length;i++) { fldTo.options[i].selected=false; } } } </script>