Javascript DOM onchange Event

Introduction

Execute a JavaScript when a user changes the selected option of a <select> element:

View in separate window 

<!DOCTYPE html>
<html>
<body>

<p>Select a new item from the list.</p>

<select id="mySelect" onchange="myFunction()">
  <option value="sql">SQL</option>
  <option value="CSS">CSS</option>
  <option value="c++">C++</option>
  <option value="javascript">Javascript</option>
</select>//  w  w w  .  ja v  a2s .  c o m

<p id="demo"></p>

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

</body>
</html>

The onchange event occurs when the value of an element has been changed.

For radio buttons and check boxes, the onchange event occurs when the checked state has been changed.

The oninput event occurs immediately after the value of an element has changed.

The onchange occurs when the element loses focus, after the content has been changed.

Bubbles:
Cancelable:
Event type:
Supported HTML tags:


















 Yes
No
Event
<input type="checkbox">,
<input type="color">,
<input type="date">,
<input type="datetime">,
<input type="email">,
<input type="file">,
<input type="month">,
<input type="number">,
<input type="password">,
<input type="radio">,
<input type="range">,
<input type="search">,
<input type="tel">,
<input type="text">,
<input type="time">,
<input type="url">,
<input type="week">,
<select> and
<textarea>



PreviousNext

Related