JSFiddle - React, Tailwind, and code Playground

by alexodiy

HTML

<select id="main" name="main" class="main_field" aria-required="true">
    <option value="one"> 
        Первая опция
    </option>
    <option value="two">
        Вторая опция
    </option>
    <option value="three" selected="selected">
        Третья опция
    </option>
</select>
<hr>
<div id="hidden_div1"  style="display:none;">Для первого селекта</div>
<div id="hidden_div2"  style="display:none;">Для второго селекта</div>
<div id="hidden_div3"  style="display:none;">Для третьего селекта, опция выбрана изначально. Надо что бы этот блок отображался сразу.</div>

JavaScript

document.getElementById('main').addEventListener('change', function () {
    var style = this.value == "one" ? 'block' : 'none';
    document.getElementById('hidden_div1').style.display = style;

    var style = this.value == "two" ? 'block' : 'none';
    document.getElementById('hidden_div2').style.display = style;

    var style = this.value == "three" ? 'block' : 'none';
    document.getElementById('hidden_div3').style.display = style;
});