通过改变innerHTML的内容,动态增加选择项

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

                    我们遇到过这样的情况,有些邮箱中有让我增加附件的时候,想增加多少点击增加就可以了,可是却不知道怎么实习的,我看了一下,其实就是运用了一个innerHTML而已,下面我做了一个实例,这是个人的习惯,就是一给自己一个好的记忆存储,也方便需要查找资料的朋友,下面就是一个简单的例子:
<html>
<head>
<title>根据JAVASCRIPT设置innerHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</style>
</head>
<script language="javascript">
//这个函数是根据用户设置的数字去重新生成innerHTML
function setid()
{
    str='<br>';   
    if(!window.form1.upcount.value)
        window.form1.upcount.value=1;
    for(i=1;i<=window.form1.upcount.value;i++)
        //str+='文件'+i+':<input type=file name=file'+i+' style=width:400><br><br>';
        str=getStrValue();
    //alert(str);
    window.upid.innerHTML=str+'<br>';
}
//增加一个
function setSetAddOne()
{
    var str;
    var id=eval(window.form1.upcount.value);
    id+=1;
    window.form1.upcount.value=id;
    str=window.upid.innerHTML;
    str+=addOne(id);
    window.upid.innerHTML=str;
}
//取得最终生成的innerHTML
function getStrValue()
{
    var str='';
    if(!window.form1.upcount.value)
        window.form1.upcount.value=1;
    //alert(window.form1.upcount.value);
    for(i=1;i<=window.form1.upcount.value;i++)
    {
        str+=addOne(i);
        //alert(str);
    }
    return str;
}
//返回增加一项的字符,参数是当前是每几个
function addOne(i)
{
    var str='请选择操作项:<select name=select'+i+'><option value=1>中国人打死日本人</option><option value=2>中国人踢死日本人</option><option value=3>中国人玩死日本人</option></select><br><br>';
    return str;
}
</script>
<body bgcolor="#FFFFFF" text="#000000">
<form name=form1>
  <br>
  <table>   
    <tr align="left" valign="middle" bgcolor="#eeeeee">
      <td bgcolor="#eeeeee" height="92">
        <li> 设置个数
          <input type="text" name="upcount" value="1">
          <input type="button" name="Button" onclick="setid();" value="· 设定 ·">
      <input type="button" name="ButtonAdd" onclick="setSetAddOne();" value="· 增加 ·">
        </li>
      </td>
    </tr>
    <tr align="center" valign="middle">
      <td align="left" id="upid" height="122">
        请选择操作项:<select name=select1><option value=1>中国人打死日本人</option><option value=2>中国人踢死日本人</option><option value=3>中国人玩死日本人</option></select>
      </td>
    </tr>       
  </table>
</form>
</body>
</html>
是一个HTML面页,拿下去就可以看效果,不用配什么的
            

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

这里写图片描述

猜你喜欢

转载自blog.csdn.net/fdyufgf/article/details/84193345