I have an array of values on an option list and when the user choose, dynamical checkbox will be made. When a the user checks the checkbox, it will show the value of the checkbox and its textbox. How to display dynamic textbox based on the optionlist and dynamic checkbox together with the value of the checkbox?
Here is a snip of the program created. Can't make dynamic textbox (which will be called "quantity") based on the checkbox (criteria) and optionlist (model) together with the checkbox value (criteria). And also I cant remove the checkbox in the criteria. It should only show the checkbox value
Please help. badly needed
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