您的位置：首页 > Web前端 > JavaScript

使用JAVASCRIPT实现动态增加、删除选择项

2007-08-07 20:13 1161 查看

这是在做现在一个系统的时候需要实现这样的功能时做的，先放在这里，如果以后忘了还可以到这里来找找，有些时候还就记得有些东西写过，不过因为一段时间的原因，忘记了，如果再去翻原来的程序那无疑是很大的工作量。

这个主要的实现使用JAVASCRIPT实现动态增加、删除选择项，可以用到如文件上传，需要一次性上传多个文件或者是发送邮件时附件允许多个一样，并且可以实现动态增加、删除，原理一样，如果需要，将本程序更改一样就OK，为了知道效果，你可以把下面的源代码复制然后放到任何一个静态网页文件中，点击就可以看到效果：

<script language="javascript">
//设定用户需要的元件个数
function setComponent()
{
        var str='';
        var i=0;
        var component_compose_ID='';//组成元件的ID字符串
if(!window.input.componentNum.value)
        {
            window.input.componentNum.value=1;
            window.input.componentNum_hidden.value=1;
            window.input.component_compose_ID.value=1;
            str='<div id=component1_div>';
            str+='<select name=component1>';
            str+=document.input.hiddenValue.value;
            str+='</select>';
            str+='数量：<input type=text name=component1Num size=10>';
            str+='  <input type=button onclick=delComponent(1) value=删除元件>';
            str+='</div>';
        }
        else
        {
            window.input.componentNum_hidden.value=window.input.componentNum.value;
            for(i=1;i<=window.input.componentNum.value;i++)
            {
                str+='<div id=component' + i + '_div>';
                str+='<select name=component' + i + '>';
                str+=document.input.hiddenValue.value;
                str+='</select>';
                str+='数量：<input type=text name=component'+i+'Num size=10>';
                str+='  <input type=button onclick=delComponent('+i+') value=删除元件>';
                str+='<br><br>';
                str+='</div>';
                component_compose_ID+=i;
            }
            window.input.component_compose_ID.value=component_compose_ID;
        }
window.chooseComponent.innerHTML=str;
}
//增加一个元件项
function addComponent()
{
    var i,j;//表示实际元件数量，j不一定是实际元件数量，表示元件的最大序号
    //因为在删除的过程中，元件的实际数量会减少，但是元件的最大序号不会变
    var hiddenStr;
    var number_str_of_add;
    if(!window.input.componentNum.value)
        i=1;
    else
        i=eval(window.input.componentNum.value);
    i++;

    if(!window.input.componentNum_hidden.value)
    {
        j=1;
    }
    else
    {
        j=eval(window.input.componentNum_hidden.value);
    }
    j++;
    number_str_of_add=window.input.component_compose_ID.value;
    number_str_of_add+=j;
    var str=window.chooseComponent.innerHTML;
    str+='<div id=component' + j + '_div>';
    str+='<select name=component' + j + '>';
    str+=document.input.hiddenValue.value;
    str+='</select>';
    str+='数量：<input type=text name=component'+j+'Num size=10>';
    str+='  <input type=button onclick=delComponent('+j+') value=删除元件>';
    str+='<br><br>';
    str+='</div>';
    window.input.componentNum.value=i;
    window.input.componentNum_hidden.value=j;
    window.input.component_compose_ID.value=number_str_of_add;
    window.chooseComponent.innerHTML=str;
}
//删除一个由ID指定的元件，再生新生成需要的字符串
function delComponent(id)
{
    document.getElementById('component'+id+'_div').innerHTML='';
    document.getElementById('component'+id+'_div').style.display='none';
    if(!window.input.componentNum.value)
        actualNum=1;
    else
        actualNum=eval(window.input.componentNum.value);
    actualNum--;
    window.input.componentNum.value=actualNum;
}
</script>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
    <title>动态增加选择项</title>
</head>
<body>
<center>
<form name="input">
<textarea cols="0" rows="0" style="display:none" name=hiddenValue>
      <option value=1>干掉小日本</option>
  <option value=2>K掉小日本</option>
  <option value=3>去死小日本</option>
  <option value=4>王八小日本</option>
</textarea>
      <table cellspacing="2" cellpadding="3" border="1">
        <tr>
          <th width="27%">
            元件个数：
          </th>
          <th width="73%" align="left"> <input type=text name="componentNum" size="25">
                <input type=hidden name="componentNum_hidden" size="25">
                <input type=hidden name="component_compose_ID" size="25">
                <input type=button onclick="setComponent()" value="。设定元件。">
                <input type=button onclick="addComponent()" value="。增加元件。">
          </th>
        </tr>
         <tr>
          <th width="27%">
            选择元件：
          </th>
          <th width="73%" id="chooseComponent" align="left">
    <select name=component1>
            <option value=1>干掉小日本</option>
  <option value=2>K掉小日本</option>
  <option value=3>去死小日本</option>
  <option value=4>王八小日本</option>
          </select>数量：<input type=text name=component1Num size=10>
          <input type=button onclick=delComponent(1) value=删除元件>
          </th>
        </tr>
      </table>
    </form>
    </center>
    </body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript input button div function border

相关文章推荐

新的分享

章节导航