I have a page with a dropdown list which has two dependents (destination & criteria). The destination is made up of dynamic checkboxes. How can I display the criteria which are dependent on the destination and model?
I don't know javascript to well and I have tried using multiple conditions in a for loop and if conditons.
How to display destination (checkboxes) and criteria (text but is aligned to its destination) at the same time based on the selected data from the dropdown? Please help!
I've found a script but the criteria also have checkboxes. What I need is plain text with respect to its destination.
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>
Aucun commentaire:
Enregistrer un commentaire