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，则此代码的凹槽将是我输入num的次数。但是，它只会运行select选项。所以，我的问题是，我可以看到该选项是HTML代码吗？因此，当我在文本字段中输入num时，我会出现类似这样的内容：

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

因此选项代码将运行与num一样多，就像我在文本字段中键入3一样，我将得到3个代码，如上所述。

Answer 1

如果我做对了，你的代码中就会出现一些问题。我相信您正尝试使用select实现下拉。

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

尝试以下方法：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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的内容

2 个答案: