如何在选择了两个下拉选项时显示隐藏div

<select id="option1">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<select id="option2">
  <option value="A">Option A</option>
  <option value="B">Option B</option>
</select>

<div id="hiddenDiv" style="display: none;">
  This is the hidden div.
</div>

// 获取下拉选项和隐藏的div元素
var option1 = document.getElementById("option1");
var option2 = document.getElementById("option2");
var hiddenDiv = document.getElementById("hiddenDiv");

// 监听下拉选项的变化
option1.addEventListener("change", toggleDivVisibility);
option2.addEventListener("change", toggleDivVisibility);

// 根据选择的值来显示或隐藏div
function toggleDivVisibility() {
  if (option1.value && option2.value) {
    hiddenDiv.style.display = "block";
  } else {
    hiddenDiv.style.display = "none";
  }
}