Select onChange in JavaScript

How to call JavaScript function on Dropdown selected index changed in HTML?

by

Select is a unique element in HTML which provides user with the dropdown list of options from which user can select/choose any one option. Mostly select is used in forms which takes user’s input. In today’s article you will learn about how to find out the ‘onchnage’ event of this HTML select in JavaScript that will help the developer to get the value of the selected option.

The change using onchange is raised for input, select, and textarea when the any user do changes to the element’s value. Not necessarily the changes occurs every time when the value of any element change. The onchange attribute works when the value of the element changes and select the new value from the List. It is a part of event attribute. It is similar to oninput event attribute. The oninput attribute of select event occurs immediately after the value of element changes, while onchange event occur once the element looses it’s focus i.e. the user has done with the selection. This attribute is associated with element “<select>”. The purpose of the HTML onchange attribute is to indicate the user agent that the value of the element has changed.

HTML & JavaScript

<!DOCTYPE html>
<html>
   <head>
      <title>Select Onchange in JavaScript - CodingIsEasy.com</title>
   </head>
   <body>
      <select id="choice">
         <option value="default" selected>Choose A Value</option>
         <option value="first">Coding Is Easy</option>
         <option value="second">Coding Is Super Easy</option>
         <option value="third">Coding Is Super-Duper Easy</option>
      </select>
      <script>
         document.getElementById('choice').onchange = function() {
            console.log("You've Selected: ",document.getElementById("choice").value);
         }
      </script>
   </body>
</html>

Output: You've Selected: third

Leave a Comment