Kramer778,
возможно вы хотели это ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hide {
display: none;
border: 1px solid red;
}
.hide.show {
display: block;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
let select = document.querySelectorAll('.main_field'),
hide = document.querySelectorAll('.hide'),
len = select[0].options.length;
let index = localStorage.show == undefined ? select[0].selectedIndex : localStorage.show;
function change() {
index = localStorage.show = this.selectedIndex;
show(index);
}
function show(index)
{
hide.forEach((e, i) => {e.classList.toggle('show', i % len == index)});
select.forEach(s => s.options[index].selected = true)
}
select.forEach(s => s.addEventListener('change', change));
show(index);
});
</script>
</head>
<body> <div class="hide one">Для первого селекта</div>
<div class="hide two">Для второго селекта</div>
<div class="hide three">Для третьего селекта, опция выбрана изначально. Надо что бы этот блок отображался сразу.</div>
<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 class="hide one">Для первого селекта</div>
<div class="hide two">Для второго селекта</div>
<div class="hide three">Для третьего селекта, опция выбрана изначально. Надо что бы этот блок отображался сразу.</div>
<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>
<div class="hide one">Для первого селекта</div>
<div class="hide two">Для второго селекта</div>
<div class="hide three">Для третьего селекта, опция выбрана изначально. Надо что бы этот блок отображался сразу.</div>
</body>
</html>