JSFiddle - React, Tailwind, and code Playground

by Darker

HTML

<select id="test">
    <option value="0">Red div</option>
    <option value="1">Blue div</option>
    <option value="2">Green div</option>
</select>    
<div class="hidden enabled" style="color:darkred" id="hidden_div1">Retired and extremelly dangerous</div>
<div class="hidden" style="color:green" id="special_hidden">Run, Forest, run!</div>
<div class="hidden" style="color:blue" id="one_more_hidden">I see the sea...</div>

CSS

div.hidden {
    display: none;
}
div.hidden.enabled {
    display:block;
}

JavaScript

window.divs = ["hidden_div1", "one_more_hidden", "special_hidden"];  
var select = document.getElementById('test');
var onchange = function(event) {   //Use var!
    var shown = this.options[this.selectedIndex].value;
    for(var i=0; i<window.divs.length; i++) {   //It would be more effective to save last shown div in a variable, but I've chosen this aproach with loop
        var div = document.getElementById(window.divs[i]);
        if(div!=null) {
          if(i==shown)  
            div.className="hidden enabled";
          else
            div.className="hidden";
        }
    }
};
select.addEventListener("change", onchange);  //Could type the function right here, without using "onchange" variable