Html 实现动态添加无限制关联下拉菜单
下面是一个简单的HTML代码，可以实现动态添加无限制关联下拉菜单：
<!DOCTYPE html>
<html>
<head>
<title>动态添加无限制关联下拉菜单</title>
</head>
<body>
<form>
<select id="first">
<option value="">请选择</option>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<div id="container"></div>
</form>
<script>
var container = document.getElementById("container");
function createSelect() {
var select = document.createElement("select");
select.innerHTML = '<option value="">请选择</option><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option>';
select.addEventListener("change", function() {
if (select.value != "") {
createSelect();
}
});
container.appendChild(select);
}
document.getElementById("first").addEventListener("change", function() {
if (this.value != "") {
createSelect();
}
});
</script>
</body>
</html>
这段代码中，首先在HTML中创建了一个下拉菜单，id为“first”。然后在JavaScript中，创建了函数createSelect()，该函数会在下拉菜单中选择某个选项时被调用。在函数中，我们创建了一个新的下拉菜单，添加了选项并将其添加到了id为“container”的div中。然后我们为新的下拉菜单添加了一个事件监听器，当选择了某个选项时，我们再次调用createSelect()函数，以创建下一个下拉菜单。
最后，我们在HTML中添加了一个名为“container”的div，用于容纳所有的下拉菜单。我们还添加了一个事件监听器，当第一个下拉菜单选择了某个选项时，我们调用createSelect()函数，以创建第二个下拉菜单。这个过程可以无限重复，从而实现了动态添加无限制关联下拉菜单的效果
原文地址: https://www.cveoy.top/t/topic/hiqK 著作权归作者所有。请勿转载和采集!