根据用户从下拉列表中的选择显示多个文本框 - Displaying a number of text boxes based on user selection from dropdown

Displaying a number of text boxes based on user selection from dropdown

我希望根据用户从下拉框中选择的数字显示多个文本框。因此，如果用户选择1，则会出现1个框，2个框，然后会出现2个框等。

我的下拉菜单-

<select name="numNames" id="numNames">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>

当用户选择一个数字时，我希望显示这个数字：

<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的代码就是看起来的样子，但当我把它放在下面的编辑器中时，它不起作用，但在她链接的例子中起作用。

<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>

有人知道为什么这不起作用吗？

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);
  } 
}

$('select').on('change', function (e) {
    var optSel = $("option:selected", this);
    var valSel = Number(this.value);
    for(var i = 0; i < valSel ; i++) {
        $("body").append('<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>');
    }
});

http://jsfiddle.net/IronFlare/0ofkdfop/