任务管理项目中：如何用原生JS为HTML Option元素添加点击事件显示时间选择器？

直接给<option>绑定click事件不可靠，不同浏览器的支持程度不一致，正确的做法是监听<select>的change事件，根据选中的选项值来控制时间选择器的显示。

另外你原代码里存在几个问题：

• 时间选择器input未设置id="date"，导致document.getElementById("date")无法找到元素
• 试图通过getElementById("choose-date")获取option元素，但该option仅设置了value="choose-date"，并未添加对应id

以下是修正后的完整代码：

HTML #

<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" />

CSS #

body {
  background-color: rgb(143, 134, 134);
}

input,
select {
  position: absolute;
  left: 50%;
  bottom: 50%;
  height: 40px;
  font-size: 20px;
  border-radius: 20px;
}

#date {
  bottom: 45%;
  display: none;
}

JavaScript #

const selection = document.getElementById("my-selection");
const datePicker = document.getElementById("date");

selection.addEventListener("change", () => {
  // 判断当前选中的选项值
  if (selection.value === "choose-date") {
    datePicker.style.display = "block";
  } else {
    // 可选：切换到其他选项时隐藏时间选择器
    datePicker.style.display = "none";
  }
});

说明 #

• 监听<select>的change事件，每次选项切换时触发逻辑
• 通过selection.value获取当前选中值，判断是否为choose-date来控制时间选择器的显示状态
• 新增的else分支可优化交互，切换到其他选项时自动隐藏时间选择器

内容的提问来源于stack exchange，提问作者Vickÿ code