Question

我有一个带有下拉列表的页面，该列表具有两个依赖项（dep1，dep2）。但是，我设法创建了动态复选框，但只显示了一个依赖项（dep1）来源是：How to create list of checkboxes dynamically with javascript。

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

如何基于从下拉列表中选择的数据同时显示dep1和dep2？请帮忙！

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>

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

<!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>

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

1 个答案: