时间戳

首页 > 解决方案 > 当单击事件生成行时，如何在选择选项中获取数组值？

javascript - 当单击事件生成行时，如何在选择选项中获取数组值？

问题描述

当单击事件生成行时，如何在选择选项中获取数组值？我试过了，该行已生成，但选项为空白。var 选项中的数组值。只需推送相同的数据 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>

标签： javascriptjqueryhtml

解决方案

你可以使用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>

推荐阅读