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

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

首先确保生成的 select 都具有不同的 ID，在您的示例中它们都具有相同的 ID，即 "select"。然后，不要附加 "original" 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> 元素？

How to generate multiple <select> elements with option tags?

html

javascript

go-templates