我有三个参数，即模型、目的地和标准。每当用户从下拉列表中选择一个模型(其中目标和标准是相关的)时，就会显示目标的动态复选框。当用户勾选目的地时，就会显示其具体条件。这是一个后续问题:How to display multiple list of checkboxes dynamically on dropdown list
<script type="text/javascript">
function populate(model, destination) {
var mod = document.getElementById(model);
var des = document.getElementById(destination);
des.innerHTML = "";
if (mod.value == "model-a") {
var optionArray = ["Model-A.1", "Model-A.2", "Model-A.3"];
} else if (mod.value == "model-b") {
var optionArray = ["Model-B.1", "Model-B.2", "Model-B.3"];
} else if (mod.value == "model-c") {
var optionArray = ["Model-C.1", "Model-C.2", "Model-C.3"];
}
for (var option in optionArray) {
if (optionArray.hasOwnProperty(option)) {
var pair = optionArray[option];
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = pair;
checkbox.value = pair;
des.appendChild(checkbox);
var label = document.createElement('label')
label.htmlFor = pair;
label.appendChild(document.createTextNode(pair));
des.appendChild(label);
des.appendChild(document.createElement("br"));
}
}
}
</script><!DOCTYPE html>
<html>
<body>
SELECT MODEL:
<select id="model" name="model" onchange="populate(this.id, 'destination')">
<option value=""></option>
<option value="model-a">MODEL-A</option>
<option value="model-b">MODEL-B</option>
<option value="model-c">MODEL-C</option>
</select>
<hr />
SELECT DESTINATION:
<div id="destination"></div>
<hr />
</body>
</html>你能帮我添加这样的事件吗？我是新人，仍在学习 javascript。
最佳答案
您可以使用下面的代码将事件附加到动态创建的元素
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = pair;
checkbox.value = pair;
checkbox.id = "desCheckBox";
des.appendChild(checkbox);
//eventname is name of the event
// here id is "desCheckBox"
document.addEventListener('eventname', function (e) {
if (e.target && e.target.id == 'id') {
// do something
}
});
关于javascript - 如何从动态创建的复选框javascript中创建复选框事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52309011/