gpt4 book ai didi

javascript - 如何使用下拉菜单打开新的动态表单[选择标签]

转载 作者:太空宇宙 更新时间:2023-11-03 19:39:43 26 4
gpt4 key购买 nike

我会尽量具体。我有一个下拉菜单[选择标签],让用户可以选择 5 个选项;即从 1 到 5 的数字。现在根据所选的选项,我想显示一个新表单,其输入标签的数量与所选的选项相同

因此,如果用户从下拉菜单中选择 3,则底部会出现一个子表,显示三个输入标签。代码是:

<select id="formName9" name="blockUnits">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

最佳答案

我支持 James Donnelly 的回答。如果您希望它是纯 Java 脚本,您可以使用此替代方法。

HTML

 <select id="formName9" name="blockUnits" onchange="addInput()">
<option selected="selected" value="1" >1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<form>
<div id="newAdd"> </div>.
</form>

JavaScript

function addElement() {
var element = document.createElement("input"); //creating input
element.setAttribute("value", "");//setting its value
element.setAttribute("name", "newInput");//naming the input
var foo = document.getElementById("newAdd");
foo.appendChild(element);//appendign the value into the parant div
}
function addInput(){
document.getElementById("newAdd").innerHTML="";//clearing the div
var noInp=parseInt(document.getElementById("formName9").value);
while(noInp>0)
{
addElement();
noInp--;
}
}

这里是 JSFIDDLE

关于javascript - 如何使用下拉菜单打开新的动态表单[选择标签],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15518698/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com