转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> Web开发 >> 正文
列表中项的自由加减实现的例子         ★★★★

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

作者:闵涛 文章来源:闵涛的学习笔记 点击数:1287 更新时间:2009/4/23 11:25:48

<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>&nbsp;待选择的部门列表:</td><td></td><td>&nbsp;已选择的部门列表:</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=">" onclick="AddSele();" title="添加所选择的部门"></td></tr>
 <tr><td align=center ><input type=button name="AddAll" value="≥" onclick="AddAlle();" title="添加所有的部门"></td></tr>
 <tr><td align=center ><input type=button name="DelSel" value="<" onclick="DelSele();" title="删掉所选择的部门"></td></tr>
 <tr><td align=center ><input type=button name="DelAll" value="≤" onclick="DelAlle();" 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("请选择至少一个部门!");
       

[1] [2]  下一页


没有相关教程
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台