javascript - 自动生成下拉列表

Question

我尝试创建一个无限下拉列表。我的意思是，如果您单击第一个下拉列表中的某些内容，则会弹出第二个下拉列表。如果您在第二个选项中选择某些内容，则会弹出第三个选项...

下拉列表之间的唯一区别是只需要填写第一个。

我的下拉列表:

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

新的下拉列表:

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

Java 脚本:

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

我还搜索了除 onclick 之外的另一个函数，因为我认为这不适用于下拉列表，至少它有问题。我尝试了其他一些但它没有做任何事情

如何制作自动无限生成的下拉列表？

Answer 1

如果我理解正确，以下就是您想要做的事情。

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>