Of course there is nothing wrong if you implement onChange event using the traditional way, that is by adding onchange=”" attribute to the HTML element. However, your codes can be better in some ways if you do it using jQuery.

Advantage of Implementing OnChange Event using jQuery

• More clean & organised. You don’t have to add inline attribute to the HTML element. The onchange event is added using jQuery that can targets any elements you want. Your jQuery scripts can be placed externally (of course), just like external CSS, more organised, easy to reuse and to be edited later on.
• jQuery is able to automatically run the event once after the page load. Please visit the demo page for more information about this.

The Codes

  Item 1
  Item 2
  Item 3
  Item 4

Onchange event is called change() in jQuery. We include jQuery keyup() event (onkeyup event in JS) too so that it can detect the change when user change their selection using keyboard arrows. For more information and real example, please visit the demo page below.

The Example Page

Onchange Event Using JQuery – Example & Demo

This example page demonstrates 2 different ways to add onchange event to a select box. One using the traditional way, another using jQuery. Feel free to view the source to learn more and use the codes wherever you want.

That’s it

Of course, the downfall of having jQuery in your page are increased bandwidth and page loading time, to load the extra 60kb of javascripts. However, if you are already using jQuery in your website, this is definitely the method you should go for.