使用jquery / javascript动态加载选择元素，显示空白

Question

完整代码笔：https://codepen.io/anon/pen/QPyPMZ

这不是重复的，因为该解决方案无法解决我的问题。如果您检查我的代码笔，它可以在以下代码段中运行，但不适用于我的html。

我正在创建一个测试“候选用户界面失败”，以便用户手动选择候选者失败的原因。该表将从ajax请求填充到一个对象中，然后该对象将使用插入行填充该表。现在，对于每一行，在下一个单元格中都需要一个选择下拉列表。每当我尝试执行此操作时，它要么显示原始代码，而不显示元素，要么根本不显示任何内容。

const dummy = [
  ['33333-1', 'Paul, Jake', 'Mitchell, Nuna'],
  ['81692-1', 'Smith, Ted', 'Mitchell, Nuna'],
  ['82654-1', 'Rele, Don', 'Mitchell, Nuna'],
  ['32984-1', 'Titan, Angela', 'Mitchell, Nuna'],
  ['33333-1', 'Paul, Jake', 'Mitchell, Nuna'],
  ['81692-1', 'Smith, Ted', 'Mitchell, Nuna'],
  ['82654-1', 'Rele, Don', 'Mitchell, Nuna'],
  ['32984-1', 'Titan, Angela', 'Mitchell, Nuna'],
  ['33333-1', 'Paul, Jake', 'Mitchell, Nuna'],
  ['81692-1', 'Smith, Ted', 'Mitchell, Nuna'],
  ['82654-1', 'Rele, Don', 'Mitchell, Nuna'],
  ['32984-1', 'Titan, Angela', 'Mitchell, Nuna'],
  ['33333-1', 'Paul, Jake', 'Mitchell, Nuna'],
  ['81692-1', 'Smith, Ted', 'Mitchell, Nuna'],
  ['82654-1', 'Rele, Don', 'Mitchell, Nuna'],
  ['32984-1', 'Titan, Angela', 'Mitchell, Nuna']
];

$(document).ready(function() {
  var tableRef = document
    .getElementById('data')
    .getElementsByTagName('tbody')[0];

  $('#sub').click(function() {
    //alert($('#pcowner :selected').text());
    $('#dataRows').empty();
    dummy.forEach(row => {
      try {
        let newRow = tableRef.insertRow(
          tableRef.rows.length
        );
        let newC0 = newRow.insertCell(0);
        let newC1 = newRow.insertCell(1);
        let newC2 = newRow.insertCell(2);
        let newC3 = newRow.insertCell(3);
        let newT0 = document.createTextNode(row[0]);
        let newT1 = document.createTextNode(row[1]);
        let newT2 = document.createTextNode(row[2]);
        let newT3 = document.createElement('div');
        let html =
          '<select><option value="">Pick me</option></select>';
        newT3.innerHTML = html;
        newC0.appendChild(newT0);
        newC1.appendChild(newT1);
        newC2.appendChild(newT2);
        newC3.append(newT3);
      } catch (e) {
        console.log(e);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<button class="btn waves-effect waves-light" id="sub" name="action" style="margin-top:17px;float:left;" type="submit">Refresh
		</button>
<div class="customContainer">
  <table class="highlight responsive-table" id="data">
    <thead>
      <tr>
        <th class="headers">Request ID</th>
        <th class="headers">Candidate Name</th>
        <th class="headers">Engagment Manager</th>
        <th class="headers">Fail Classification</th>
        <th class="headers">Reason</th>
        <th class="headers">Comments</th>
        <th class="headers">PC Action Required</th>
        <th class="headers">PM Action Required</th>
      </tr>
    </thead>
    <tbody id="dataRows"></tbody>
  </table>
</div>

对于其他挑战，失败分类和原因都是相互关联的下拉列表。

const failClassifications = [1, 2, 3]
const failReasons = {"1":["Late","Never Showed"],"2":["Background Failed"],"3":["Excessive pay request", "pours milk before cereal"]}

根据失败分类中所做的选择，它将在下一列中填充适当的下拉选择。