CODEWITHSUNDEEP
javascripthtmlgo-templates
Amid
Amid

Reputation: 621

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

I'm trying to append the defined select element to the document. This answer, describes quite well about fixed arrays, but in my case I have a slice which is applied to the template by ExecuteTemplate method, so the value of <option> tags are defined by slice values. Here is my code which does not work, as it should:

<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>

What am I looking for is about generating select list based on the user's input. For example if the user enters 2, so two select menu going to appear on the screen.

How can I do this?

Upvotes: 1

Views: 1270

Answers (2)

tech_amity
tech_amity

Reputation: 202

To append multiple select elements, first you have create a select element. You can not directly get an elementById and append different element as child.

<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>

Upvotes: 0

Flo
Flo

Reputation: 986

First of all make sure that generated selects all have different IDs, in your example they all have the same id which is "select". Then instead of appending the "original" select element, try to clone it then add its clone to your div.

What I would do is :

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

Hope it helps!

Upvotes: 3

Related Questions