请教各位大虾如何用js实现在一个页面中点击一个按钮动态添加一个select multiple框（点击次数为止，每点击一次增加一个select控件）！急

dragon_zh 2004-05-12 06:07:58

每次点击需要生成一个select multiple控件，而且不刷新页面。同时可以将上面一些控件的值选择添加到新生成的任意一个select multiple控件中。

...全文

94 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

cxjd 2004-05-13

打赏
举报

根据规则，动态往页面写（或删除）源码，要多少写多少

Apollo47 2004-05-13

打赏
举报

设置一个全局计数变量,
count = 0; 每次新增就加1。
然后，名字就可以 name = "selectName" + count;
这样就不会重名了。
这只是一种解决方法，根据实际情况，你可以把count换成其他的有意义的符号.

dragon_zh 2004-05-13

打赏
举报

非常感谢 net_lover(孟子E章)给出的解决办法，解决了一部分的问题。
但是现在仍然存在一个关键的问题，就是生成的新的select都是同名的，无法区分。
能否让这个新生成的控件都不同名，而且可以分别取到任何一个对象。
我试了将select的名字设为变量名，但是取这个对象时js不认变量。

急盼解决办法！

Argentia 2004-05-13

打赏
举报

<html>
<body>
<form>
<select id='sel' multiple>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<br>
<input type='button' value='add' onclick='_addNewSelect();'>
<input type='button' value='check' onclick='_checkObject();'>
<div id='_new'>
</div>
<script>
function _addNewSelect()
{
var newSel=document.createElement("select");
if (document.all._new.childNodes.length)
newSel.id="sel"+(document.all._new.childNodes.length);
else
newSel.id="sel0";
newSel.multiple="true";
var newOpt;
for (var i=0; i<document.all.sel.options.length; i++)
{
newSel.options[i]=new Option(document.all.sel.options[i].text);
}
document.all._new.appendChild(newSel);
//alert(newSel.outerHTML);
}
function _checkObject()
{
var _preName="document.all.sel";
for (var i=0; i<document.all._new.childNodes.length; i++)
alert(eval(_preName+i+".outerHTML"));
}
</script>
</form>
</body>
</html>

孟子E章 2004-05-12

打赏
举报

也可以

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">

</SCRIPT>
</head>
<body>
<center>
<input type="button" value="add" onclick="a()">
<form method="POST">
<table bgcolor="#FFFFCC">

<tr>
<td bgcolor="#FFFFCC" width="85">
<select size="6" name="srcList" multiple>
<option value="1">Item 1
<option value="2">Item 2
<option value="3">Item 3
<option value="4">Item 4
<option value="5">Item 5
<option value="6">Item 6
</select>
</td>
<td bgcolor="#FFFFCC" width="74" align="center">
<input type="button" value=" 增加到右边 " onClick="javascript:addSrcToDestList()">
<br><br>
<input type="button" value=" 从右边删除 " onclick="javascript:deleteFromDestList();">
</td>
<td bgcolor="#FFFFCC" width="69" id="x">

</td>
</tr>
</table>
</form>
</body>
</html>

孟子E章 2004-05-12

打赏
举报

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">

</SCRIPT>
</head>
<body>
<center>
<input type="button" value="add" onclick="document.all.x1.style.display='';document.all.x2.style.display='';">
<form method="POST">
<table bgcolor="#FFFFCC">

<tr>
<td bgcolor="#FFFFCC" width="85">
<select size="6" name="srcList" multiple>
<option value="1">Item 1
<option value="2">Item 2
<option value="3">Item 3
<option value="4">Item 4
<option value="5">Item 5
<option value="6">Item 6
</select>
</td>
<td bgcolor="#FFFFCC" width="74" align="center" id="x1" style="display:none">
<input type="button" value=" 增加到右边 " onClick="javascript:addSrcToDestList()">
<br><br>
<input type="button" value=" 从右边删除 " onclick="javascript:deleteFromDestList();">
</td>
<td bgcolor="#FFFFCC" width="69" id="x2" style="display:none">
<select size="6" name="destList" multiple>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>

从“菜鸟”到“专家”，每一个层次都是对前一层次的深化和发展，同时也对程序员提出了更高的要求。最终达到“专家”层次，意味着在某个领域内成为了真正的领军人物，对整个行业都有着重要的贡献和影响。