jQuery .change() Method

What Is .change()?

.change() is jQuery’s legacy shorthand for binding or triggering the form change event on input, select, and textarea elements. Binding is deprecated since 3.3; modern code uses .on("change") / .trigger("change").

// Legacy (still works; bind form deprecated since 3.3)
$("#country").change(function () {
  // value changed
});

// Modern replacements
$("#country").on("change", handler);   // bind
$("#country").trigger("change");       // fire

// .val() does NOT fire change — trigger after script updates
$("#country").val("US").trigger("change");

How to Use .change()

Recognize the legacy API in old code, then migrate to .on() / .trigger().

1. Bind with .change(handler) (legacy) or .on("change", handler) (preferred).
2. Optionally pass eventData: .change(data, handler) → .on("change", data, handler).
3. Trigger with no-arg .change() (legacy) or .trigger("change") (preferred).
4. After .val(), always trigger manually — script updates do not fire change.
5. For dynamic fields, use delegated .on("change", selector, fn) — not .change().

Pseudocode

// Legacy
call element.change(handler)
    → bind "change" on element

call element.change()
    → trigger "change" on element

// Modern (jQuery 1.7+)
call element.on("change", handler)
when user changes value (select: immediate; text: on blur):
    fire "change" on element
    call handler(event)

when script sets value with .val():
    change does NOT fire
    call element.trigger("change") if handlers must run

to migrate:
    .change(fn)      → .on("change", fn)
    .change(data, fn) → .on("change", data, fn)
    .change()        → .trigger("change")

Cheat Sheet

Quick map from the shorthand to modern APIs.

Live Preview

Pick an action against a sample select. The demo uses .change() (still available in jQuery 3.x) so you can see bind vs trigger.

Ready — pick an action and click Run.

jQuery Examples

Short, copy-ready snippets. Prefer .on("change") for new projects; these demos show the legacy API you will still meet in older code.

$("#country").change(function () {
  var label = $("#country option:selected").text();
  $("#out").text("Selected: " + label);
});

User picks "Canada"
#out shows "Selected: Canada"
(Select change fires immediately)

$(".plan-select").change({ currency: "USD" }, function (event) {
  var plan = $(this).val();
  $("#out").text("Plan: " + plan + " | currency: " + event.data.currency);
});

Change a plan select → "Plan: pro | currency: USD"
Same eventData shared across every .plan-select

$("#tier").change(function () {
  $("#out").text("Tier is now: " + $(this).val());
});

$("#set-pro").on("click", function () {
  $("#tier").val("pro").change(); // prefer .trigger("change")
});

Click #set-pro
.val("pro") alone would not update #out
.val("pro").change() → "Tier is now: pro"

$("#legacy").change(function () {
  $("#out").text("Legacy: .change(fn) — deprecated since 3.3.");
});

$("#modern").on("change", function () {
  $("#out").text("Modern: .on('change', fn) — use this for new code.");
});

Change #legacy → legacy deprecation message
Change #modern → modern .on("change") message
Behavior is the same — API name differs

$("#flavor")
  .change(function () {
    var text = $("#flavor option:selected").text();
    $("#summary").text("You picked: " + text);
  })
  .change();

On load → "You picked: Chocolate" (default)
User changes select → summary updates again
Modern: .on("change", fn).trigger("change")

Performance Notes

The shorthand and .on("change") cost the same for a single bind. Prefer .on() for clarity and delegation. Keep the callback light — update a label or toggle a class, then stop.

Key Takeaways