如何让下拉切换与Javascript一起工作？

<select id="dropdown">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<div id="content">
  <div id="option1" class="option-content">选项1的内容</div>
  <div id="option2" class="option-content">选项2的内容</div>
  <div id="option3" class="option-content">选项3的内容</div>
</div>

.option-content {
  display: none;
}

// 获取下拉框和内容区域的元素
var dropdown = document.getElementById("dropdown");
var content = document.getElementById("content");

// 监听下拉框的change事件
dropdown.addEventListener("change", function() {
  // 获取当前选中的选项值
  var selectedOption = dropdown.value;
  
  // 隐藏所有内容
  var optionContents = content.getElementsByClassName("option-content");
  for (var i = 0; i < optionContents.length; i++) {
    optionContents[i].style.display = "none";
  }
  
  // 显示选中选项对应的内容
  var selectedContent = document.getElementById(selectedOption);
  selectedContent.style.display = "block";
});