本文介绍如何通过监听两个 元素的用户选择，组合其可见文本（而非 value 值），并在点击按钮时动态更新目标 或 的内容，实现如“你选择了 monday 和 january”这类条件化展示。

本文介绍如何通过监听两个 `` 元素的用户选择，组合其可见文本（而非 value 值），并在点击按钮时动态更新目标 `

` 或 `

` 的内容，实现如“你选择了 monday 和 january”这类条件化展示。

在 Web 表单交互中，常需根据多个控件的组合选择触发特定反馈。本例聚焦于两个下拉菜单（<select></select>）：一个用于选择星期（如 Monday、Tuesday），另一个用于选择月份（如 January、February）。目标是——当用户点击按钮时，获取二者当前选中的显示文本（即 <option></option> 标签内的文字），拼接成提示信息并渲染到页面。

关键点在于：原始代码仅读取 value 属性（如 "1" 或 "J"），而需求明确要求显示 "monday" 和 "january" 这类可读文本。因此，不能直接使用 select.value，而应通过 select.selectedIndex 定位到被选项，再访问其 .text 属性。

以下是完整、可运行的实现方案：

<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></select><input type="button" value="option chosen" onclick="optionClicked()"><p id="div"></p>

function getSelectedText(select) {
  // 防御性检查：确保有选项被选中
  if (select.selectedIndex === -1) return '';
  return select.options[select.selectedIndex].text;
}

function optionClicked() {
  const daysSelect = document.getElementById("days");
  const monthsSelect = document.getElementById("months");
  const displayDiv = document.getElementById("div");

  const selectedDay = getSelectedText(daysSelect);
  const selectedMonth = getSelectedText(monthsSelect);

  // 只有当两个都已选择时才显示组合信息，否则提示
  if (selectedDay && selectedMonth) {
    displayDiv.innerHTML = `You chose ${selectedDay} and ${selectedMonth}.`;
  } else {
    displayDiv.innerHTML = "Please select both a day and a month.";
  }
}

✅ 注意事项：

• 使用 .text 而非 .value 是获取用户看到的文字的关键；
• 添加 selectedIndex === -1 判断可避免未选时读取 undefined.text 报错；
• <p></p> 标签需设置 id="div"（或更语义化的 id="result"）以确保 getElementById 正确匹配；
• 若需实时响应（无需点击按钮），可将逻辑绑定至 onchange 事件，并为两个 <select></select> 分别添加监听器，再统一校验。

该方案简洁、健壮，适用于任意数量的文本型下拉组合判断场景，是前端条件化 UI 渲染的基础实践之一。