How to display multiple list of checkboxes dynamic

2019-09-01 18:29发布

站内问答 / JavaScript
1493 1 5

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.

I don't know javascript to well and I have tried using multiple conditions in a for loop and if conditons.

How can I display dep1 and dep2 at the same time based on the selected data from the dropdown? Please help!

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>

1条回答
神经病院院长
2楼-- · 2019-09-01 18:45

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)