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>
<div id="display">

JavaScript

$( document ).ready(function() {});
function populate(slct1, slct2) {
		  var s1 = $('#'+slct1).val();
			var newCheck = "";
			if($("#slct2").length == 0) {
			  //it doesn't exist
		    	newCheck = "<br><div id='slct2'></div>";
    		    $( '#'+slct1 ).after(newCheck);
			}else{
				$( '#slct2' ).empty();
        $('#display').html("");
			}
		  if (s1 == "LowerPrimary") {
		    var optionArray = ["Std-1", "Std-2", "Std-3", "Std-4", "Std-5"];
		  } else if (s1 == "HighSchool") {
		    var optionArray = ["Std-6", "Std-7", "Std-8"];
		  } else if (s1 == "Secondary") {
		    var optionArray = ["Std-9", "Std-10"];
		  } else if (s1 == "HigherSecondary") {
		    var optionArray = ["Std-11", "Std-12"];
		  }

		  for (var option in optionArray) {
		    if (optionArray.hasOwnProperty(option)) {
		      var pair = optionArray[option];
		      var newOption = "<input type = \"checkbox\" value="+pair+" id="+pair+">"+ pair +"<br>";
		      $( '#slct2' ).append(newOption);
		    }
		  }
		  
		  $('#slct2  input:checkbox').change(function(){
		      var tempValue='';
		      tempValue=$('#slct2  input:checkbox').map(function(n){
		          if(this.checked){
		                return  this.value;
		              };
		       }).get().join(',');
		   console.log(tempValue);
		       $('#display').html(tempValue);
		    })
		}