JSFiddle - React, Tailwind, and code Playground

by Rayudu Ikkurthi

HTML

<select name="select1" id="select1" onchange=myFunction();>
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
</select>

<select name="select2" id="select2">

</select>

<div id="text">

</div>

<script>
function myFunction(){
var secondSelectBox = document.getElementById("select2");
var SecondOptions;
var firstSelectedValue = document.getElementById("select1").value;
switch(firstSelectedValue){
			case "1":
      SecondOptions =new Array("Banana", "Apple","Orange");
      break;
      case "2":
      SecondOptions =new Array("Wolf", "Fox","Bear");
      break;
      case "3":
      SecondOptions =new Array("Eagle", "Hawk");
      break;
      case "4":
      SecondOptions =new Array("BWM");
      break;
      default:
      SecondOptions:new Array("Please chosse..")
}
//Clear the fields
   secondSelectBox.options.length=0;

 var opt = document.createElement('option');
    opt.value = 'select';
    opt.innerHTML = 'select';
    secondSelectBox.appendChild(opt);

for(var i=0; i<SecondOptions.length; i++){
 var opt = document.createElement('option');
    opt.value = SecondOptions[i];
    opt.innerHTML = SecondOptions[i];
    secondSelectBox.appendChild(opt);
}
    document.getElementById("text").innerHTML = SecondOptions+"  You selected: " + firstSelectedValue ;

}

</script>