How to execute a JavaScript when a user changes the selected option of a <select> element

When you select a new car, a function is triggered which outputs the value of the selected car.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<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() {
  let x = document.getElementById("mySelect").value;
  document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>

</body>
</html>

Output should be:

Single Articles

Example of HTML onchange Event Attribute	Form Events Attribute
Definition and Usage of HTML onchange Event Attribute	Form Events Attribute
Browser Support of HTML onchange Event Attribute	Form Events Attribute
Syntax of HTML onchange Event Attribute	Form Events Attribute
Attribute Values of HTML onchange Event Attribute	Form Events Attribute
Technical Details of HTML onchange Event Attribute	Form Events Attribute
How to execute a JavaScript when a user changes the selected option of a <select> element	Form Events Attribute
How to execute a JavaScript when the user changes the content of an input field	Form Events Attribute

List of Form Events Attribute	Form Events Attribute
HTML onblur Event Attribute	Form Events Attribute
HTML onchange Event Attribute	Form Events Attribute
HTML oncontextmenu Event Attribute	Form Events Attribute

Type:	Html
Category:	Web Tutorial
Sub Category:	Form Events Attribute
Uploaded by:	Admin