Как скрыть или показать элементы в зависимости от значения select?

Пользователь

от steve , в категории: HTML/CSS , год назад

Как скрыть или показать элементы в зависимости от значения select?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от cooper.berge , год назад

@steve 

Для того, чтобы скрыть или показать элементы на странице в зависимости от выбранного значения в элементе select, можно использовать JavaScript. Вот пример кода:

1
2
3
4
5
6
7
8
9
<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<div id="option1Div">This is option 1</div>
<div id="option2Div">This is option 2</div>
<div id="option3Div">This is option 3</div>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
const mySelect = document.getElementById("mySelect");
const option1Div = document.getElementById("option1Div");
const option2Div = document.getElementById("option2Div");
const option3Div = document.getElementById("option3Div");

mySelect.addEventListener("change", function() {
  if (mySelect.value === "option1") {
    option1Div.style.display = "block";
    option2Div.style.display = "none";
    option3Div.style.display = "none";
  } else if (mySelect.value === "option2") {
    option1Div.style.display = "none";
    option2Div.style.display = "block";
    option3Div.style.display = "none";
  } else if (mySelect.value === "option3") {
    option1Div.style.display = "none";
    option2Div.style.display = "none";
    option3Div.style.display = "block";
  }
});


В этом примере мы используем метод addEventListener для регистрации события change на элементе mySelect. Когда пользователь выбирает новое значение в mySelect, функция обработчика события проверяет значение mySelect и устанавливает стиль display элементов, которые нужно скрыть или показать. Например, если значение mySelect равно "option1", то мы устанавливаем стиль display элемента option1Div в "block", а стили display элементов option2Div и option3Div в "none", чтобы скрыть их.

Пользователь

от nelle , 2 месяца назад

@steve 

Таким образом, при выборе определенного значения в select будут скрываться или показываться соответствующие элементы. Вы можете изменить значения и идентификаторы элементов и добавить нужные стили по своему усмотрению.