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"]
}
};
functionpopulate(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)
});
}
functioncreateCheckBox(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:
<selectid="model"name="model"onchange="populate(this.id, 'destination')"><optionvalue="select">--Select Model--</option><optionvalue="model-A">Model-A</option><optionvalue="model-B">Model-B</option></select><hr /> Destination:
<divid="destination"></div><hr /> Criteria:
<divid="criteria"></div><hr /></body></html>
Post a Comment for "How To Display Multiple List Of Checkboxes Dynamically On Dropdown List"