HTML 的 元素本身不支持 click 事件监听，正确做法是监听 元素的 change 事件，并根据选中值动态控制时间选择器（）的显隐状态。

html 的 `` 元素本身不支持 `click` 事件监听，正确做法是监听 `` 元素的 `change` 事件，并根据选中值动态控制时间选择器（``）的显隐状态。

在构建任务管理类应用时，常需通过下拉菜单提供“今天”“明天”“自定义日期”等快捷选项。其中，“自定义日期”应触发时间选择器显示——但需注意：原生 <option></option> 标签无法直接绑定 click 事件，因为浏览器不会在其上派发用户交互事件（如 click），且该元素属于 <select></select> 的内部渲染控件，不具备独立事件捕获能力。

✅ 正确实现方式是监听 <select></select> 元素的 change 事件，并在回调中判断当前选中值：

<select name="selection" id="my-selection">
  <option value="today">Today</option>
  <option value="tomorrow">Tomorrow</option>
  <option value="choose-date">Choose Date</option>
</select>
<input type="datetime-local" id="date-picker" style="display: none;" />

document.getElementById("my-selection").addEventListener("change", function() {
  const datePicker = document.getElementById("date-picker");
  if (this.value === "choose-date") {
    datePicker.style.display = "block";
  } else {
    datePicker.style.display = "none";
  }
});

? 关键要点说明：

• 使用 change 事件而非 click：它在用户确认选择（释放鼠标或键盘回车）后触发，语义准确、兼容性好；
• 为 <input> 显式添加 id="date-picker"，避免依赖无 ID 的模糊选择；
• 推荐用 style.display 控制显隐（而非 CSS class 切换），简洁直接；若需过渡动画，可配合 opacity + transition 或 visibility；
• 注意：<input type="datetime-local"> 在部分旧版 Safari 中支持有限，生产环境建议增加降级方案（如日期+时间双输入框）。

? 进阶提示： 若需在“Choose Date”被选中时自动聚焦时间选择器，可在显示后调用 datePicker.focus()；若希望清除其他选项选中时的时间值，可追加 datePicker.value = ""。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

立即学习“前端免费学习笔记（深入）”；

此方案纯用 Vanilla JS 实现，无需框架，轻量可靠，适用于各类表单场景。