根据用户从下拉列表中的选择显示许多文本框 [英] Displaying a number of text boxes based on user selection from dropdown
本文介绍了根据用户从下拉列表中的选择显示许多文本框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望显示一些文本框，具体取决于用户从下拉框中选择的数字.因此，如果用户选择1，则会出现1个框，然后出现2个然后2个框，依此类推.
I am looking to display a number of text boxes depending on what number the user selects from the drop down box. So if the user selects 1 then 1 box will appear, 2 then 2 boxes will appear etc.
我的下拉菜单-
<select name="numNames" id="numNames">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
当用户选择一个数字时，我希望显示该数字:
And when the user selects a number i want this to be displayed:
<div class="form-group">
<label for="Name" class="col-sm-4 control-label">Name:</label>
<div class="col-sm-8 input">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name" required="required">
</div>
</div>
@Elise Chant的代码一直在寻找，但是当我将其放在下面的编辑器中时，它不起作用，但在她链接的示例中起作用.
The code from @Elise Chant is what is was looking but when i place it in the editor as below it doesn't work but does work in the example that she linked.
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
var el = '<div class="form-group">' +
'<label for="Name" class="col-sm-4 control-label">Name:</label>' +
'<div class="col-sm-8 input">' +
'<input type="text" class="form-control" id="name" name="name" placeholder="Enter name" required="required">' +
'</div>' +
'</div>';
$('#numNames').on('change', function(e) {
var numSelected = $(this).val();
appendControls(numSelected);
});
function appendControls(num) {
$('#elcontainer').empty();
for (var i=0; i<Number(num); i++) {
$('#elcontainer').append(el);
}
}
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<select name="numNames" id="numNames">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="elcontainer"></div>
</body>
</html>
有人知道为什么这行不通吗?
Anyone know why this doesn't work?
推荐答案
http://jsbin.com/zewadupivi/1/edit?js，输出
var el = '<div class="form-group">' +
'<label for="Name" class="col-sm-4 control-label">Name:</label>' +
'<div class="col-sm-8 input">' +
'<input type="text" class="form-control" id="name" name="name" placeholder="Enter name" required="required">' +
'</div>' +
'</div>';
$('#numNames').on('change', function(e) {
var numSelected = Number($(this).val());
appendControls(numSelected);
});
function appendControls(num) {
$('#elcontainer').empty();
for (var i=0; i<num; i++) {
$('#elcontainer').append(el);
}
}
这篇关于根据用户从下拉列表中的选择显示许多文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
