如何在下拉列表中动态显示多个复选框列表

我有一个页面，下拉列表有两个依赖项（dep1，dep2）。 但是，我设法创建动态复选框，但只有一个依赖显示（dep1）源是： 如何使用javascript动态创建复选框列表 。

我不太了解javascript，我尝试在for循环和conditons中使用多个条件。

如何根据下拉列表中的选定数据同时显示dep1和dep2？ 请帮忙！

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")); } } }  

    Model:  --Select Model-- Model-A Model-B  
 Destination: 
 
 Criteria: 
 
   

Answer 1

我稍微修改了你的代码。 希望你期待这个。

 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")) } 

    Model:  --Select Model-- Model-A Model-B  
 Destination: 
 
 Criteria: