javascript 使用 appendChild 出现具有特定 ID 的事物

Question

我不知道怎么解释，我不希望它不清楚，所以首先，我想展示这个 HTML 代码：

<body>
  <form class="" action="index.html" method="post">
    <input type="num" onkeyup="addOptions()" name="member" id="member">
    <div id="selects">

    </div>
  </form>
</body>

这是 javascript 代码：

<script type="text/javascript">

function addOptions() {
  document.getElementById('selects').innerHTML = "";
  var inputValue = document.getElementById('member').value;
  for (var i = 0; i < inputValue; i++) {
    var select = document.createElement('select');
    var option = document.createElement('option');
    option.innerText = "Example";

    select.appendChild(option);
    document.getElementById('selects').appendChild(select);
  }
}
</script>

因此，如果我在输入 num 中键入 num，则此代码的最佳状态是，select 将出现与我键入 num 一样多的次数。但是，它只会运行 select 选项。所以，我的问题是我可以看到该选项在 HTML 代码中吗？因此，当我在文本字段中键入数字时，我会出现类似这样的内容，例如：

<option value="example" id="example">example</option>

所以选项代码将运行与 num 一样多，比如当我在文本字段中键入 3 时，我将得到 3 个代码，如上所示。

Answer 1

如果我没看错，你的代码中有一些问题。我相信您正在尝试使用 select 实现下拉。

在 for 循环中，您在每次迭代中创建 select，我认为您不希望这样做。要使 value、id 对新创建的 option 可用，您必须将这些属性设置为 option.

尝试以下操作：

function addOptions() {
  document.getElementById('selects').innerHTML = "";
  var select = document.createElement('select');
  var inputValue = Number(document.getElementById('member').value);
  for (var i = 0; i < inputValue; i++) {
    var option = document.createElement('option');
    option.innerText = "Example" + i;
    option.value = "example" + i;
    option.id = "example" + i;
    select.append(option);
  }
  if(select.innerHTML) // if at least one option then append select
    document.getElementById('selects').appendChild(select);
}

<input type="num" oninput="addOptions()" name="member" id="member"><br><br>
<div id="selects">

</div>

Answer 2

只需将一些行移出您的 for 循环，如下所示：

function addOptions() {
  document.getElementById('selects').innerHTML = "";
  var inputValue = document.getElementById('member').value;
  var select = document.createElement('select');
  for (var i = 0; i < inputValue; i++) {
    var option = document.createElement('option');
    option.innerText = "Example "+i;
    select.appendChild(option);
  }
  document.getElementById('selects').appendChild(select);
}

<form class="" action="index.html" method="post">
  <input type="num" onkeyup="addOptions()" name="member" id="member">
  <div id="selects">

  </div>
</form>

javascript 使用 appendChild 出现具有特定 ID 的事物

javascript appear a thing with specific id using appendChild

html

javascript

loops

appendchild

option