JSFiddle - React, Tailwind, and code Playground

by Alexis López Espinoza

HTML

<select name = "v1">
    <option value = "op1">Opción 1</option>
    <option value = "op2">Opción 2</option>
    <option value = "op3">Opción 3</option>
    <option value = "op4">Opción 4</option>
    <option value = "op5">Opción 5</option>
</select>
		
<button class = "registro">Ingresar</button>
	
<div id = "op1">Div OP1</div>
<div id = "op2">Div OP2</div>
<div id = "op3">Div OP3</div>
<div id = "op4">Div OP4</div>
<div id = "op5">Div OP5</div>

CSS

div{
    width: 50%;
    height: 5rem;
    line-height: 5rem;
    text-align: center;
    position: absolute;
    display: none;
}

div:nth-child(even){
    background: lightcyan;
}

div:nth-child(odd){
    background: lightyellow;
}

JavaScript

var select = document.querySelector("[name=v1]"),
    button = document.querySelector(".registro"),
    divs = document.querySelectorAll("[id^=op]");

button.addEventListener("click", function(){
    [].forEach.call(divs, function(div){
        div.style.display = div.id == select.value ? "block" : "none"; 
    });
}, false);