зависимость от выбора пункта меню js
здравствуйте. столкнулась с данной проблемой. есть форма и поле с выпадающим списком. необходимо организовать так, чтобы от пункта меню зависела дальнейшая информации на форме.
сама форма <form action="" method="POST"> <div class="qwestion__block"> <label for="">Название теста:</label> <input type="text" name="qwestion" id="qwestion" placeholder="Введите название теста..." required> </div> <div class="qwestion__block"> <label for="">Текст вопроса:</label> <input type="text" name="qwestion" id="qwestion" placeholder="Введите текст вопроса..." required> </div> <div class="qwestion__block"> <label for="">Вид вопроса:</label> <select name="type" id="type" required> <option selected value=""></option> <option value="one">Однозначный</option> <option value="number">Число</option> <option value="text">Слово</option> </select> </div> дальнейшая информация на форма соответно с пунктами выпадающего меню <div class="variants"> <div class="one__block"> <div class="answer__item"> <input type="radio" class="radio__input" id="radio_1"> <input type="text" class="input__input" name="var__answer" id="var__answer" placeholder="Введите вариант ответа на вопрос..." required> </div> <div class="answer__item"> <input type="radio" class="radio__input" id="radio_2"> <input type="text" class="input__input" name="var__answer" id="var__answer" placeholder="Введите вариант ответа на вопрос..." required> </div> <div class="answer__item"> <input type="radio" class="radio__input" id="radio_3"> <input type="text" class="input__input" name="var__answer" id="var__answer" placeholder="Введите вариант ответа на вопрос..." required> </div> <div class="answer__item"> <input type="radio" class="radio__input" id="radio_4"> <input type="text" class="input__input" name="var__answer" id="var__answer" placeholder="Введите вариант ответа на вопрос..." required> </div> </div> <div class="number__block"> <div class="answer__item"> <label for="">Вариант ответа:</label> <input type="number" name="qwestion" id="qwestion" placeholder="Введите вариант ответа..." required> </div> </div> <div class="text__block"> <div class="answer__item"> <label for="">Вариант ответа:</label> <input type="text" name="qwestion" id="qwestion" placeholder="Введите вариант ответа..." required> </div> </div> скрипт <script type="text/javascript"> document.forms[0].oninput = () => { // ищем элемент <select> const select = document.querySelector('select') // ищем элемент <div class="variants"> const variants = document.querySelector('.variants'); // ищем элементы <option> const options = select.querySelectorAll('option'); // собираем значения const values = [...options].map(option => option.value); // Удаляем все классы из списка классов fruits for (const item of values) { variants.classList.remove(item); } // Добавляем класс fruits равную значению value //из выбранного элемента в <select> variants.classList.add(select.value); } </script> что в скрипте не так? |
kseni,
:-? |
Часовой пояс GMT +3, время: 13:19. |