📅 最后修改于: 2023-12-03 15:01:14.455000 🧑 作者: Mango
在 HTML 中，onchange 是一个事件属性，该属性可与表单元素一起使用，用于在表单元素的值发生更改时执行 JavaScript 代码。
以下是用于创建 onchange 事件处理程序的语法：
<select onchange="myFunction()"></select>
<input type="text" onchange="myFunction()">
在上面的示例中，当选择框或文本输入框中的值发生更改时，将调用名为 myFunction() 的 JavaScript 函数。
下面是一个例子，其中 onchange 属性用于当下拉框中的选项更改时，在页面中更新文本：
<!DOCTYPE html>
<html>
<head>
<title>Onchange Event Example</title>
</head>
<body>
<select onchange="updateText()">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<p id="text">Select an option above.</p>
<script>
function updateText() {
var selectBox = document.getElementsByTagName("select")[0];
var selectedValue = selectBox.options[selectBox.selectedIndex].text;
document.getElementById("text").innerHTML = "You selected: " + selectedValue;
}
</script>
</body>
</html>
在上面的示例中，当用户更改下拉框中的选项时，将调用 updateText() 函数。此函数将获取所选选项的文本，并将其显示在页面上。
onchange 事件属性可应用于以下 HTML 表单元素：
<input type="text"><input type="password"><input type="checkbox"><input type="radio"><input type="file"><select><textarea>在这些元素的值发生更改时，onchange 事件将被触发。
onchange 事件属性在 HTML 表单处理中非常有用。它允许您在表单元素的值发生更改时执行 JavaScript 代码，从而使您能够动态地更新页面内容。在您的下一个 Web 项目中，考虑使用 onchange 事件来增强用户体验。