HTML | DOM onchange 事件

介绍

在 HTML DOM（文档对象模型）中，onchange 事件在元素的值更改时发生，通常在表单控件中使用。例如：当下拉列表的选项被更改时，onchange 事件将被触发。

使用方法

HTML

在 HTML 中，可以使用以下方式添加 onchange 事件：

<select id="mySelect" onchange="myFunction()">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  alert("You selected: " + x);
}
</script>

JavaScript

使用 JavaScript，也可以为元素添加 onchange 事件：

document.getElementById("mySelect").onchange = function() {myFunction()};

function myFunction() {
  var x = document.getElementById("mySelect").value;
  alert("You selected: " + x);
}

jQuery

在 jQuery 中，可以使用 .change() 方法为元素添加 onchange 事件：

$('#mySelect').change(function() {
  var x = $(this).val();
  alert("You selected: " + x);
});

实例演示

点击查看实例

总结

onchange 事件可以用来检测表单控件的更改，如下拉列表的选项更改等。使用方法包括在 HTML 中添加 onchange 属性，使用 JavaScript 设置元素的 onchange 属性，以及使用 jQuery 的 change() 方法。