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>

自动生成下拉列表

1 个答案: