如何在下拉列表上动态显示复选框的多个列表 [英] How to display multiple list of checkboxes dynamically on dropdown list
问题描述
我有一个带有下拉列表的页面，该列表具有两个依赖项(dep1，dep2).但是，我设法创建了动态复选框，但只显示了一个依赖项(dep1) 来源是:如何使用javascript动态创建复选框列表.
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.
我不太了解javascript，我曾尝试在for循环和if条件中使用多个条件.
I don't know javascript to well and I have tried using multiple conditions in a for loop and if conditons.
如何根据从下拉列表中选择的数据同时显示dep1和dep2?请帮忙！
How can I display dep1 and dep2 at the same time based on the selected data from the dropdown? Please help!
javascript:
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>
推荐答案
我对您的代码做了一些修改.希望您对此有所期待.
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>
这篇关于如何在下拉列表上动态显示复选框的多个列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
