事件侦听器中的箭头函数<select><option>(vanilla JavaScript)

Question

我有这个代码：

<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>
for (let option of document.querySelectorAll('option')) {
//Listen to 'change' event of all options
option.onchange = (e) => {
console.log('changed')
}
}

我想为每个选项添加一个事件监听器，这样当它被选中时就会发生一些事情。为什么它不起作用？option.onselect也不起作用。

Answer 1

选项没有change事件，只有select事件。将单个侦听器附加到select。

const select = document.querySelector('#weeks');
select.addEventListener('change', (e) => {
console.log(select.value);
});

<select name="weeks" id="weeks">
<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>