如何在选中两个特定下拉选项时显示div？

你的代码只读取了第一个日期下拉框的值，完全没处理第二个月份下拉框，所以只能输出单个选择的内容。要实现两个选项组合的显示，只需要同时获取两个下拉框的选中内容，再拼接输出即可，修改方案如下：

修改后的完整代码 #

HTML部分 #

<select id="days">
  <option value="1">Monday</option>
  <option value="2">Tuesday</option>
</select>

<select id="months">
  <option value="J">January</option>
  <option value="F">February</option> <!-- 修正拼写错误：febuary → February -->
</select>

<input type="button" value="确认选择" onclick="optionClicked()" />
<!-- 添加显示结果的容器 -->
<div id="result"></div>

JavaScript部分 #

function optionClicked() {
  // 获取两个下拉框的DOM元素
  const daySelect = document.getElementById("days");
  const monthSelect = document.getElementById("months");

  // 获取用户看到的选中选项文本（直接用显示的文字更直观）
  const selectedDay = daySelect.options[daySelect.selectedIndex].text;
  const selectedMonth = monthSelect.options[monthSelect.selectedIndex].text;

  // 获取结果显示容器
  const resultContainer = document.getElementById("result");

  // 拼接内容并显示
  resultContainer.innerHTML = `您选择的是${selectedDay}和${selectedMonth}`;
}

说明 #

1. 新增了id="result"的div作为结果显示容器，避免原代码中找不到对应元素的问题
2. 同时读取两个下拉框的选中文本，直接拼接成需要的内容输出
3. 修正了月份选项的拼写错误（febuary改为February）
4. 不管选择哪组组合（Monday+January、Monday+February、Tuesday+January、Tuesday+February），都会正确显示对应的组合内容

内容的提问来源于stack exchange，提问作者Codersec