Core JavaScript

An OnChange Select Event

This JavaScript program shows how to handle an onchange event in a select element.

OnChangeSelect.html

<!DOCTYPE html>
<html>
  <head>
    <script>
function fnSelectPerson() {
  var sValue = document.getElementById("idSelect").value;
  document.getElementById("idOutput").innerHTML = "You changed the value to " + sValue;
}
    </script>
  </head>
  <body>
    <p>Select a person of the Trinity.</p>
    <!-- This event only happens when the selected value acually changes. -->
    <select id="idSelect" onchange="fnSelectPerson()">
      <option value="Father">Father</option>
      <option value="Son">Son</option>
      <option value="Holy Spirit">Holy Spirit</option>
    </select>
    <p id="idOutput"></p>
  </body>
</html>
 

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.