How To Display Multiple List Of Checkboxes Dynamically On Dropdown List
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
Solution 1:
I have slightly modified your code. Hope you are expecting this.
var mappingData = {
"model-A": {
"destination": ["Destination A1", "Destination A2", "Destination A3"],
"criteria": ["Criteria A1", "Criteria A2", "Criteria A3"]
},
"model-B": {
"destination": ["Destination B1", "Destination B2", "Destination B3"],
"criteria": ["Criteria B1", "Criteria B2", "Criteria B3"]
}
};
function populate(model, destination) {
var mod = document.getElementById('model');
var des = document.getElementById('destination');
var criteria = document.getElementById('criteria');
des.innerHTML = "";
criteria.innerHTML = "";
mappingData[mod.value].destination.forEach(function(item) {
createCheckBox(item, des)
});
mappingData[mod.value].criteria.forEach(function(item) {
createCheckBox(item, criteria)
});
}
function createCheckBox(value, parent) {
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = value;
checkbox.value = value;
var label = document.createElement('label')
label.htmlFor = value;
label.appendChild(document.createTextNode(value));
parent.appendChild(checkbox)
parent.appendChild(label)
parent.appendChild(document.createElement("br"))
}<!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>
Post a Comment for "How To Display Multiple List Of Checkboxes Dynamically On Dropdown List"