JSFiddle - React, Tailwind, and code Playground

HTML

<select id="dropDown" onchange="test()">
 <option value="default" selected="selected"> Please select shape </option>
 <option value="one" id="rectangle">Rectangle</option>
 <option value="two" id="triangle">Triangle</option>
 <option value="three" id="circle">Circle</option>
</select>

<div id="wrapperOne"><h1>
First
</h1></div>
<div id="wrapperTwo"><h1>
Second
</h1></div>
<div id="wrapperThree"><h1>
Third
</h1></div>

JavaScript

var dropDown = document.getElementById("dropDown"),
   myWrappers = [
      document.getElementById("wrapperOne"),
      document.getElementById("wrapperTwo"),
      document.getElementById("wrapperThree")
   ];
function test() {
for (i=0; i<myWrappers.length; i++){
    if(dropDown.value === "default"){ 
       myWrappers[i].style.display = "none";
     } else if(dropDown.value === "one"){
       myWrappers[i].style.display = "none";
       myWrappers[0].style.display = "block";
      } else if(dropDown.value === "two"){
       myWrappers[i].style.display = "none";
       myWrappers[1].style.display = "block";
      } else if(dropDown.value === "three"){
       myWrappers[i].style.display = "none";
       myWrappers[2].style.display = "block";
      }
 }
}