不使用jQuery实现选中option元素时触发事件

嗨，我完全懂你的困扰——不用jQuery的情况下，让select的change事件正常工作确实得注意几个容易踩的小坑。我来给你分享下原生JS的靠谱实现方式：

核心实现步骤 #

首先，我们需要正确获取select元素并绑定change事件，然后在事件回调里判断选中的选项是否为"Other"。

示例代码 #

先看HTML结构（假设你的select是这样的）：

<select id="categorySelect">
  <option value="music">音乐</option>
  <option value="movie">电影</option>
  <option value="other">Other</option>
</select>
<!-- 可选：比如选中Other后要显示的输入框 -->
<input type="text" id="otherInput" placeholder="请输入其他内容" style="display: none;">

然后是原生JS代码：

// 确保DOM加载完成后再执行代码，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取select元素
  const selectEl = document.getElementById('categorySelect');
  // 获取对应的输入框（如果有需要的话）
  const otherInput = document.getElementById('otherInput');

  // 绑定change事件
  selectEl.addEventListener('change', function() {
    // 获取当前选中的选项对象
    const selectedOpt = this.options[this.selectedIndex];

    // 两种判断方式，选适合你的一种：
    // 1. 根据选项的value判断（推荐，更精准）
    if (selectedOpt.value === 'other') {
      console.log("Other选项被选中啦！");
      otherInput.style.display = 'block'; // 显示输入框
    } else {
      otherInput.style.display = 'none'; // 隐藏输入框
    }

    // 2. 根据选项的文本判断（适合value不固定的情况）
    // if (selectedOpt.textContent.trim() === 'Other') {
    //   // 执行你的逻辑
    // }
  });
});

常见问题排查 #

如果你的change事件没生效，大概率是这几个原因：

• DOM加载顺序问题：如果你的JS代码写在<head>里，DOM还没渲染完就去获取元素，自然找不到。解决办法就是把代码放在DOMContentLoaded回调里，或者把JS脚本放在<body>的最后。
• 元素选择器错误：检查你的getElementById/querySelector的参数是不是和select的id/class完全匹配，有没有拼写错误。
• 选项判断逻辑不匹配：比如"Other"选项的value不是'other'，或者文本里有多余空格，记得用trim()去掉前后空白字符再判断。

如果还是有问题，可以打开浏览器控制台（F12）看看有没有报错信息，通常能快速定位到问题所在~

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