JavaScript函數使用select顯示多個div

Question

我試圖根據用戶在選擇下拉列表中選擇的數字顯示div次數。

我有一個以前使用過的功能：

$(document).ready(function(){
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" value="" 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);
  } 
}
});

這個函數可以很好地顯示div，但是這次我試圖顯示一個包含一些php代碼的div：

<div class="form-group">
<script>
function ChooseName(data) {
document.getElementById ("Name").value = data.value;
}
</script>

<label for="airline" 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 or Choose From the List Below" value="">
<select name="selectName" id="selectName" onchange="ChooseName(this)">
<?php
$dbQuery = $db->prepare("SELECT Name FROM users ORDER BY Name asc");
$dbQuery->execute();

    while ($dbRow = $dbQuery->fetch(PDO::FETCH_ASSOC))
    {
        echo '<option value= "'. $dbRow['Name'] . ' ">' . $dbRow['Name'] . '</option>'; 
    }
?>
</select>
</div>
</div>

我試圖以與上述div相同的方式設置該功能，但我一直找不到方法。

有什么辦法可以做到這一點嗎？ 還是有類似的方法我可以做到？

Answer 1

放-

<script>
function ChooseName(data) {
document.getElementById ("Name").value = data.value;
}
</script>

在div外面。 然后使用事件clone div-

function appendControls(num) {
  $('#elcontainer').empty();
  var el = $('.from-group:first').clone(true, true);
  for (var i=0; i<Number(num); i++) {
     $('#elcontainer').append(el);
  } 
}