HTML Reference Manual

HTML tag大全

HTML onchange event attribute

onchange can be used to get or set the event handler function for the current element's change event.

Online Example

When the user changes the selected option of the <select> element, execute JavaScript:

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML onchange event attribute usage (Basic Tutorial Website oldtoolbag.com)</title>
</head>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
　　<option value="Audi">Audi
　　<option value="BMW">BMW
　　<option value="Mercedes">Mercedes
　　<option value="Volvo">Volvo
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
<script>
function myFunction() {
　　var x = document.getElementById("mySelect").value;
　　document.getElementById("demo").innerHTML = "You selected: "　+　x;
}
</script>
</body>
</html>

Test and see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

All major browsers support the onchange event attribute

Definition and Usage

The onchange attribute triggers when the value of the element changes.

Tip: This event is similar to the oninput event. The difference is that the oninput event occurs immediately after the value of the element changes, while the onchange event occurs when the element loses focus. Another difference is that the onchange event also applies to <select> elements.

HTML 4.01 and HTML5The differences between

No difference.

Syntax

<element onchange="script">

Attribute Value

Value	Description
script	Specifies the script to be executed when the onchange event is triggered.

HTML Event Attributes

HTML: <template> tag