如何在点击事件中生成行时在select选项中获取数组值？

Question

如何在click事件中生成行时在select选项中获取数组值？我试过这个，生成了行，但选项是空白的。 var选项中的数组值。 jush推送相同的数据10次。我是否正确使用forEach循环？ 请帮忙。

$('#click').click(function() {
  $("#table tbody tr").remove();

  var r = 10;
  var option = [];
  for (var i = 1; i <= 10; i++) {
    option.push("<option>selectme</option>");
  }
  console.log(option);

  // for (var i = 1; i <= 10; i++) {
  var td = "<tr><td>number</td><td>name</td><td><select>" +
    option.forEach(function(e) { e; }); +
    "</select></td></tr>";
  $("#table tbody").append(td);
  // }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="table" border="solid">
  <thead>
    <tr>
      <td>s.no.</td>
      <td>name</td>
      <td>class</td>
    </tr>
  </thead>
  <tbody>
     <tr>
      <td>2</td>
      <td>name2</td>
      <td>option</td>
    </tr>
  </tbody>
</table>
<button id="click">click</button>

Answer 1

没有。您以错误的方式使用了forEach，因为forEach始终返回undefined。在这种情况下，您应该使用reduce，如下所示：

<script type="text/javascript">
  $('#click').click(function () {
    $("#table tbody tr").remove();

    var r = 10;
    var option = [];
    for (var i = 1; i <= 10; i++) {
      option.push("<option>selectme</option>");
    }
    console.log(option);

    // for (var i = 1; i <= 10; i++) {
    var td = "<tr><td>number</td><td>name</td><td><select>" +
      option.reduce((acc, cur) =>
        acc + cur
      );
    +"</select></td></tr>";
    $("#table tbody").append(td);
    // }
  })
</script>

Answer 2

您可以使用forEach，但您需要稍微改变一下。首先，创建一个空的select元素，然后运行forEach以创建新的option元素，并将它们附加到select。

$('#click').click(function(){
  $("#table tbody tr").remove();

  var r = 10;
  var option = [];
  for (var i = 1; i <= 10; i++) {
      option.push("selectme");
  }

  var td = "<tr><td>number</td><td>name</td><td><select></select></td></tr>";
  $("#table tbody").append(td);

  const select = document.querySelector('select');
  option.forEach(v => {
      const o = document.createElement('option');
      o.textContent = v;
      select.appendChild(o);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" border="solid">
  <thead>
      <tr>
          <td>s.no.</td>
          <td>name</td>
          <td>class</td>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>2</td>
          <td>name2</td>
          <td>option</td>
      </tr>
  </tbody>
</table>
<button id="click">click</button>