当前位置:asp编程网>技术教程>Javascript教程>  正文

两个select相互的添加与删除

2009-05-05 19:57:27   来源:www.aspbc.com    作者:佚名   浏览量:1952   收藏

效果如图:

选择左边列表中的某一项,点击添加,所选择的内容在右边出现。
选择右边列表中的某一项,点击删除,右边所选择项被删除

代码:
<style>
<!--
select{
 width:120px; 
}
-->
</style>
<table width="282" border="0" cellspacing="0" cellpadding="0">
<form action="" method="post">
  <tr>
    <td width="120" height="242"><select name="a1" id="a1" size="10">
 <option value="2009-01-01">2009-01-01</option>
 <option value="2009-01-02">2009-01-02</option>
 <option value="2009-01-03">2009-01-03</option>
 <option value="2009-01-04">2009-01-04</option>
 <option value="2009-01-05">2009-01-05</option>
 <option value="2009-01-06">2009-01-06</option>
 <option value="2009-01-07">2009-01-07</option>
 <option value="2009-01-08">2009-01-08</option>
 <option value="2009-01-09">2009-01-09</option>
 <option value="2009-01-10">2009-01-10</option> 
 </select></td>
    <td width="109" align="center"><input type="button" name="Submit" value="添加" onclick="add()">
      <br>
      <br>
      <input type="button" name="Submit2" value="删除" onClick="del()"></td>
    <td width="171"><select name="a2" id="a2" size="10">
    </select>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr></form>
</table>
<script language="javascript">
function add()
{
/*
程序名称:两个select相互的添加与删除
程序开发:wangsdong
版权所属:www.aspbc.com
说明:支持原创,转载请保留此文件,谢谢
*/
   s1=document.getElementById("a1");
   l=s1.length;
   j=0;
   for(i=0;i<l;i++)
   {
       if(s1.options[i].selected==true)
    {
       v=s1.options[i].value;   
    s2=document.getElementById("a2");
    m=0;
    for(k=0;k<s2.length;k++)
    {
       if(s2.options[k].value==v)
    {
      m=1;
    }
    }
    if(m==0)
    {
      var varItem = new Option(v, v);     
    s2.options.add(varItem);       
    }
    else
    {
      alert('已经存在此选项');
    }
    j=1;
    break;
    }
   } 
   if(j==0)
   {
      alert('请选择你要添加的选项');
   }
   return false;
}
function del()
{
   s2=document.getElementById("a2");
   l=s2.length;
   j=0;
   for(i=0;i<l;i++)
   {
       if(s2.options[i].selected==true)
    {
        s2.options.remove(i);
     s2.length=l-1;   
        j=1;
        break;
    }
   }
   if(j==0)
   {
      alert('请选择你要删除的选项');
   }
   return false;
}
</script>

代码下载地址:http://www.aspbc.com/code/showcode.asp?id=96


 



关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网