Показать сообщение отдельно
  #15 (permalink)  
Старый 16.02.2023, 17:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

synchronous selects
Kramer778,
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .hide {
            display: none;
        }

        .hide.show {
            display: block;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let select = document.querySelectorAll('.main_field'),
                hide = document.querySelectorAll('.hide');
            let index = localStorage.show == undefined ? select[0].selectedIndex : localStorage.show;
            function change() {
                index = localStorage.show = this.selectedIndex;
                show(index);
            }
            function show(index)
            {  let div = document.querySelector('.hide.show');
               if (div) div.classList.remove('show');
               hide[index].classList.add('show');
               select.forEach(s => s.options[index].selected = true)

            }

            select.forEach(s => s.addEventListener('change', change));
            show(index);
        });
    </script>
</head>

<body>
    <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>
</body>

</html>
Ответить с цитированием