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

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";
  }
});