原生JavaScript为select下拉框option绑定事件监听器箭头函数不生效问题

问题原因 #

• <option> 元素本身不支持 change、select 事件，选项选中状态变化的事件是由其父级 <select> 元素触发的，给单个 option 绑定这两类事件不会触发回调。

正确实现方案 #

你只需要给父级 select 绑定 change 事件，再获取当前选中的 option 执行对应逻辑即可，示例代码如下：

<select name="weeks" id="weeks" multiple>
   <option class="week" name="09" value="09">09</option>
   <option class="week" name="13" value="13">13</option>
   <option class="week" name="14" value="14">14</option>
   <option class="week" name="15" value="15">15</option>
</select>

const weekSelect = document.getElementById('weeks')
weekSelect.addEventListener('change', () => {
  // 获取所有当前选中的option元素
  const selectedOptions = Array.from(weekSelect.selectedOptions)
  selectedOptions.forEach(opt => {
    // 此处根据选中option的属性执行对应操作
    console.log('当前选中的周数：', opt.value)
  })
})

如果需要每个选项对应独立的处理逻辑，可以提前定义好值和处理函数的映射关系，触发时匹配执行即可。

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