JSFiddle - React, Tailwind, and code Playground
HTML
<select id="select">
<option>Number List</option>
<option id="first">number 1</option>
<option id="second">number 2</option>
<option id="third">number 3</option>
</select>
<div>
<div class="passive" id="first-i">number 1 content</div>
<div class="passive" id="second-i">number 2 content</div>
<div class="passive" id="third-i">number 3 content</div>
</div>
CSS
.passive {
display: none;
}
.active {
display: block;
}
JavaScript
var select = document.getElementById('select'),
curr = null;
select.addEventListener('change', function() {
var name = this.options[this.selectedIndex].getAttribute('id'),
target = document.getElementById(name + '-i');
if (curr) curr.className = 'passive';
if (target) target.className = 'active';
curr = target;
});