如何根据在html中选择的选项切换div的可见性

<select id="selectOption">
  <option value="div1">选项1</option>
  <option value="div2">选项2</option>
  <option value="div3">选项3</option>
</select>

<div id="div1">内容1</div>
<div id="div2">内容2</div>
<div id="div3">内容3</div>

// 获取下拉列表和div元素
var select = document.getElementById("selectOption");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 监听下拉列表的变化事件
select.addEventListener("change", function() {
  // 获取选中的选项值
  var selectedOption = select.value;

  // 根据选项值切换div的可见性
  if (selectedOption === "div1") {
    div1.style.display = "block";
    div2.style.display = "none";
    div3.style.display = "none";
  } else if (selectedOption === "div2") {
    div1.style.display = "none";
    div2.style.display = "block";
    div3.style.display = "none";
  } else if (selectedOption === "div3") {
    div1.style.display = "none";
    div2.style.display = "none";
    div3.style.display = "block";
  }
});