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>

我试图以与上面相同的方式设置该功能，但是我一直无法找到方法。

我有什么方法可以这样做吗？或者我有类似的方式吗？

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

JavaScript函数使用select显示多个div

1 个答案: