[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>

Задача чтобы в зависимости от выбора опции селекта отображался нужный блок, реализуем с помощью JS:

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

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

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

Вот этот же код в песочнице - https://jsfiddle.net/alexodiy/904597e7/17/
По умолчанию у нас выбрана 3 опция. Как сделать так, чтобы скрипт отрабатывал вывод блока во время загрузки или после загрузки страницы?