I have a page with a dropdown list which has two dependents (dep1, dep2). However, I managed to create dynamic checkboxes but with only one dependent showing (dep1)
source is: How to create list of checkboxes dynamically with javascript.
I don't know javascript to well and I have tried using multiple conditions in a for loop and if conditons.
How can I display dep1 and dep2 at the same time based on the selected data from the dropdown? Please help!
javascript:
<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-A1", "Model-A2", "Model-A3"];
} else if (mod.value == "Model-B") {
var optionArray = ["Model-B1", "Model-B2", "Model-B3"];
}
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>
Model:
<select id="model" name="model" onchange="populate(this.id, 'destination')">
<option value="select">--Select Model--</option>
<option value="model-A">Model-A</option>
<option value="model-B">Model-B</option>
</select>
<hr />
Destination:
<div id="destination"></div>
<hr />
Criteria:
<div id="criteria"></div>
<hr />
</body>
</html>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
