JSFiddle - React, Tailwind, and code Playground

by Sanal S

HTML

<select id="slct1" name="slct1" onchange="populate(this.id, 'slct2')">
  <option value=""></option>
  <option value="LowerPrimary">LowerPrimary</option>
  <option value="HighSchool">HighSchool</option>
  <option value="Secondary">Secondary</option>
  <option value="HigherSecondary">HigherSecondary</option>

</select>

JavaScript

function populate(slct1, slct2) {
console.log(slct1);
console.log(slct2);
  var s1 = document.getElementById(slct1);
  var s2 = document.getElementById(slct2);
  s2.innerHTML = "";
  if (s1.value == "LowerPrimary") {
    var optionArray = ["Std-1", "Std-2", "Std-3", "Std-4", "Std-5"];
  } else if (s1.value == "HighSchool") {
    var optionArray = ["Std-6", "Std-7", "Std-8"];
  } else if (s1.value == "Secondary") {
    var optionArray = ["Std-9", "Std-10"];
  } else if (s1.value == "HigherSecondary") {
    var optionArray = ["Std-11", "Std-12"];
  }

  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;
      s2.appendChild(checkbox);

      var label = document.createElement('label')
      label.htmlFor = pair;
      label.appendChild(document.createTextNode(pair));

      s2.appendChild(label);
      s2.appendChild(document.createElement("br"));
    }
  }
}