欢迎光临
我们一直在努力

两个select相互的添加与删除

建站超值云服务器,限时71元/月

效果如图:

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

代码:
<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


 

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 两个select相互的添加与删除
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址