如何在选择框中选择值时显示特定div的输入文本框？

<select id="selectBox">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<div id="div1" style="display: none;">
  <input type="text" id="input1">
</div>

<div id="div2" style="display: none;">
  <input type="text" id="input2">
</div>

<div id="div3" style="display: none;">
  <input type="text" id="input3">
</div>

document.getElementById("selectBox").addEventListener("change", function() {
  var selectedValue = this.value;
  
  // 隐藏所有的div
  document.getElementById("div1").style.display = "none";
  document.getElementById("div2").style.display = "none";
  document.getElementById("div3").style.display = "none";
  
  // 根据选择的值显示对应的div
  if (selectedValue === "option1") {
    document.getElementById("div1").style.display = "block";
  } else if (selectedValue === "option2") {
    document.getElementById("div2").style.display = "block";
  } else if (selectedValue === "option3") {
    document.getElementById("div3").style.display = "block";
  }
});