Question

我从数据库中获取员工ID并显示它。现在，一旦单击addRow()，就需要在表格中动态填充一个下拉列表值，但下拉列表中不会显示任何值。怎么了请帮助我完成此操作。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onClick="addRow()">Add Row</button>
<table id="dataTable"></table>

function addRow() {
  var option = '';
  var data = <?php echo json_encode($employee);?>;
  $.each(data, function(i, item) {
    option += '<option value="' + item.id + '">' + item.id + '</option>';
  });
  $('#emp_id').append(option);

  $("#dataTable").append('<tr><td><select name="emp_id" id="emp_id"></select</td></tr>');
}

Answer 1

问题是因为您试图将option元素添加到尚未在DOM中创建的select元素中。要解决此问题，请先创建select，然后向其中添加option元素。

还请注意，最好将class分配给新的select，而不是id，以避免重复。您还可以通过使用option来使创建map()元素的逻辑更加简洁：

function addRow() {
  var data = [{ id: 'foo' }, { id: 'bar' }]; // <?php echo json_encode($employee);?>;
  var options = data.map(function(el) {
    return `<option value="${el.id}">${el.id}</option>`;
  });
  var $tr = $('<tr><td></td></tr>').appendTo('#dataTable');
  $('<select name="emp_id" class="emp_id" />').html(options).appendTo($tr.find('td'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onClick="addRow()">Add Row</button>
<table id="dataTable"></table>

如何动态填充jQuery中的下拉列表？

1 个答案: