如何在 onChange 中使用 e.preventDefault 来选择标签答案

【问题标题】：How to use e.preventDefault inside onChange for select tag如何在 onChange 中使用 e.preventDefault 来选择标签
【发布时间】：2020-04-29 17:18:31
【问题描述】：

有没有办法可以通过使用preventDefault 来停止更改选择标记值。我可以使用event.preventDefault 防止输入更改值但不能阻止选择标签改变值。

这是一个示例代码：

document.getElementById('my-select').addEventListener('select', function(event) {
  event.preventDefault()
});

document.getElementById('my-input').addEventListener('keypress', function(event) {
	event.preventDefault()
});

<select id="my-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<input type="text" id="my-input">

【问题讨论】：

更改事件发生在更改已经发生之后。您需要逻辑来表示先前的值并在不应该发生的情况下将其还原。或者可选地，改变选择，这样用户就不能首先选择无效值。
只需禁用选择，如<select id="my-select" disabled>

标签： javascript html select dom-events preventdefault

【解决方案1】：

选择事件监听器应该是 'change' 而不是 .addEventListener('select' ...

但是，为了调用 preventDefault()，选择 HTML 元素中的更改事件是不可取消的。如果您记录事件对象，您将看到它的可取消属性设置为 false。也许您可以将选择元素设置为禁用。

【讨论】：