我会尽可能具体。我有一个下拉菜单[选择标签],用户可以选择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
您可以使用on change
事件侦听器:
$('select#formName9').on('change', function() {
/* Remove the existing input container, if it exists. */
$('form#container').remove();
/* Get the selected value and create the new container. */
var val = $(this).val()
$container = $('<form id="container"></form>');
/* Loop through creating input elements based on value. */
for(i=0;i<val;i++)
{
/* Create the new input element. */
var $input = $('<input type="text"/>');
/* Append this input element to the container. */
$input.appendTo($container);
}
/* Add container to the page. */
$container.insertAfter($(this));
})
JSFiddle示例。
然后,您可以在此基础上进行扩展,以添加基于最初的selected
选项的默认输入:
扩展的JSFiddle。
$('select#formName9').on('change', function() {
var ddVal=$(this).val();
for(i=0;i<ddVal.length;i++)
{
$("#FORMPOSITION").append("<input type='text' name='ddG"+i+"' id='ddVL"+i+"'>");
}
});
在执行之前要考虑引号。
我尝试并工作了。试试看:
$(document).ready(function() {
$('#formName9').change(function() {
var number = parseInt($('#formName9').val());
if(number == 3) {
alert('3 HERE');
}
});
});
这是一个基本想法,如果需要,您可以在此基础上添加更多的输入。
HTML:
<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>
<div id="form1" class="hiddenForm form">Form 1</div>
<div id="form2" class="hiddenForm form">Form 2</div>
<div id="form3" class="hiddenForm form">Form 3</div>
<div id="form4" class="hiddenForm form">Form 4</div>
<div id="form5" class="hiddenForm form">Form 5</div>
jQuery:
$("#form1").show()
$("#formName9").change(function () {
var form = "#form" + $(this).val();
$(form).siblings(".hiddenForm").hide()
$(form).show();
});
CSS:
.form {
padding: 10px;
border: 1px dotted #000;
margin: 5px;
}
.hiddenForm {
display: none;
}
您可以使用Ajax调用,并将响应添加到DOM中,也可以使用JS直接添加DOM。
对于直接DOM,类似于(使用jQuery(:
$('#formName9').on('change', function() {
var selected = $(this).val();
$('#aDomElement').empty();
for (var i=1; i<=selected; i++) {
$('#aDomElement').append(
$('<div id="'+i+'">').html(
$('<input>').attr('name', 'input'+i).attr('type', 'text')
)
);
}
});
其中,aDomElement
是现有HTML元素的ID。