通過改變innerHTML的內容，動態增加選擇項
阿新 • • 發佈：2018-12-22
我們遇到過這樣的情況，有些郵箱中有讓我增加附件的時候，想增加多少點選增加就可以了，可是卻不知道怎麼實習的，我看了一下，其實就是運用了一個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面頁，拿下去就可以看效果，不用配什麼的
<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面頁，拿下去就可以看效果，不用配什麼的