Question

我正在尝试将已定义的select元素附加到document。这个answer很好地描述了固定数组，但是在我的情况下，我有一个slice通过ExecuteTemplate方法应用于模板，因此<option>标签的值由slice值定义。这是我的无效代码，应该这样做：

<html>
<input type="number" id="count">

<select id="select">
   {{ range .Slice }}
       <option value="{{ .Name }}">{{ .Name }}</option>
   {{ end }}
</select>

<div class="test"></div>

<button onclick="generateSelects();">Test</button>
</html>

 <script>
    function generateSelects() {
      var count = document.getElementById("count").value;
      var i;

      var select = document.getElementById("select");
      var divClass = document.getElementsByClassName("test");


      for (i = 0; i < Number(count); i++) {
        divclass[0].appendChild(select);    
      )   
    }
</script>

我要寻找的是关于根据用户输入生成select列表的信息。例如，如果用户输入2，那么两个select菜单将出现在屏幕上。

我该怎么做？

Answer 1

首先，请确保生成的选择均具有不同的ID，在您的示例中，它们都具有相同的ID，即“ select”。然后，不要添加“原始”选择元素，而是尝试克隆它，然后将其克隆添加到div中。

我要做的是：

function generateSelects() {
      var count = document.getElementById("count").value;
      var i;
      var select = document.getElementById("select");
      var divClass = document.getElementsByClassName("test");

      for (i = 0; i < Number(count); i++) {
        var clone = select.cloneNode(true); // true means clone all childNodes and all event handlers
        clone.id = "some_id";
        divclass[0].appendChild(clone); 
      }  
}

希望有帮助！

Answer 2

要附加多个 select 元素，首先需要创建一个select元素。您不能直接获取 elementById 并将其他元素附加为子元素。

<script>
    function generateSelects() {
      var count = document.getElementById("count").value;
      var i;
      var divClass = document.getElementsByClassName("test");


      for (i = 0; i < Number(count); i++) {
var option = document.createElement("OPTION");
  option.setAttribute("value", "optionvalue");
var select = document.createElement("SELECT");
select.appendChild(option);
        divclass[0].appendChild(select);    
      )   
    }
</script>

如何使用选项标签生成多个<select>元素？

2 个答案: