CODEWITHSUNDEEP
javascripthtmldrop-down-menu
Kees
Kees

Reputation: 13

Automatically generating dropdown list

I try to create an infinite dropdown list. With this I mean if you click something on the first dropdown list, the second dropdown list will pop up. If you choose something on the second the third one will pop up...

The only difference between the dropdown lists is that only the first one will be required to fill in.

My dropdown list:

<select name="dropdown" style="font-size:18pt;height:40px;width:410px;" onclick="myFunction()" required>
<option value="">Choose something</option>
{{range .}} <option value='1'>{{.Name}}</option>
{{end}}
</select>

The new coming dropdown lists:

<div id="myDIV" style="display:none">    
    <select name="dropdown" style="font-size:18pt;height:40px;width:410px;" onselect="myFunction()">
    <option value="">Choose something</option>
    {{range .}} <option value='1'>{{.Name}}</option>
    {{end}}
    </select>    
</div>

The Java Script:

<script>
    function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

I also searched for another function than onclick, because that's not for the dropdown lists I think, at least it's buggy. I tried some others but than it doesn't do anything

How can I make an automatically infinite generating dropdownlist?

Upvotes: 0

Views: 98

Answers (1)

Honkalonkalooooohhh
Honkalonkalooooohhh

Reputation: 141

If i understood you correctly the following is what you want to do.

var addDropDown = function (e) {
    e.currentTarget.removeEventListener(e.type, addDropDown);
    var clone = e.currentTarget.cloneNode(true);
    clone.setAttribute('id', "dropdown-" + document.getElementsByTagName("select").length)
    e.currentTarget.parentNode.insertBefore(clone, e.currentTarget.nextSibling);
    clone.addEventListener("change", addDropDown);
}

document.getElementById("dropdown-0").addEventListener("change", addDropDown);
<select id="dropdown-0" name="dropdown">
    <option value="">make a selection</option>
    <option value='1'>Option1</option>
</select>

Upvotes: 1

Related Questions