Automatically generating dropdown list

Question

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?

What framework are you using here? That looks like handlebars but well who knows. — Liam
– Liam, Commented Nov 1, 2018 at 11:48
Firefox (just as an example) has tremendous performance issues with dropdowns including 3k+ items. Do your homework. Not something you want to do. I suggest implementing something with a smart search solution that queries a database and returns perhaps top X results. — Pegues
– Pegues, Commented Nov 1, 2018 at 11:49
He doesn't want an infinite dropdownlist he wants to add an infinity amount of drop down lists whenever the prepending sibling gets a selection. Still don't know why you would need it to be infinite. — Honkalonkalooooohhh
– Honkalonkalooooohhh, Commented Nov 1, 2018 at 11:52
The options in the dropdown lists are not infinite, only the amount of dropdown lists that can be created are infinite. So i try to create a script that adds a copy of the first <select>...</select>. So people can choose from the list i created in a json file (10 options) and implented by GOlang into the dropdown list after choosing in the first list a second one will show up, so people can choose more than only once. — Kees
– Kees, Commented Nov 1, 2018 at 11:57

Honkalonkalooooohhh · Accepted Answer · 2018-11-01 12:27:40Z

1

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>

edited Nov 1, 2018 at 12:27

answered Nov 1, 2018 at 12:16

Honkalonkalooooohhh

1417 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Honkalonkalooooohhh Over a year ago

I think you should still limit the amount of dropdown selections you can create. Just don't apply the event listener clone.addEventListener("change", addDropDown); if the max select condition is met.

Honkalonkalooooohhh Over a year ago

edit: starting id to dropdown-0 so no duplicate ids

Collectives™ on Stack Overflow

Automatically generating dropdown list

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related