jQuery .select() Method

What Is .select()?

.select() is jQuery’s legacy shorthand for binding or triggering the select event — when the user highlights text inside an input or textarea. Binding is deprecated since 3.3; modern code uses .on("select") / .trigger("select"). It is not the HTML <select> dropdown.

// Legacy (still works; bind form deprecated since 3.3)
$("#target").select(function () {
  // user highlighted text inside the field
});

// Modern replacements
$("#target").on("select", handler);     // bind
$("#target").trigger("select");         // fire + select all text

// Not for HTML <select> dropdowns → use change
$("#country").on("change", handler);

How to Use .select()

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

1. Bind with .select(handler) (legacy) or .on("select", handler) (preferred).
2. Optionally pass eventData: .select(data, handler) → .on("select", data, handler).
3. Trigger with no-arg .select() (legacy) or .trigger("select") (preferred) — selects all text.
4. Use only on text input / textarea — not HTML <select>.
5. For dynamic fields, use delegated .on("select", selector, fn) — not .select().

Pseudocode

// Legacy
call input.select(handler)
    → bind "select" on input

when user highlights text:
    fire "select" on input
    call handler(event)

call input.select()
    → trigger "select" (handlers + select all text)

// Modern
call input.on("select", handler)
call input.trigger("select")

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

Cheat Sheet

Quick map from the shorthand to modern APIs.

Live Preview

Highlight text in the demo field, or run an action with legacy .select() (still available in jQuery 3.x).

Ready — highlight text or pick an action.

jQuery Examples

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

$("#target").select(function () {
  $("#out").text("Handler for select called (.select(fn)).");
});

Highlight any characters in #target
#out shows the handler message

$("#notes").select({ tip: "Copy / Bold / Link" }, function (event) {
  $("#out").text("Toolbar: " + event.data.tip);
});

Highlight text → "Toolbar: Copy / Bold / Link"

$("#target").select(function () {
  $("#out").text("Select handler ran (user or .select()).");
});

$("#other").on("click", function () {
  $("#target").select(); // no-arg → trigger
});

Click #other → entire field selected
Bound handler updates #out

// Before (deprecated bind)
$("#target").select(function () {
  $("#out").text("legacy .select(fn)");
});

// After (preferred)
$("#target").on("select", function () {
  $("#out").text("modern .on(\"select\", fn)");
});

// Trigger: .select() → .trigger("select")

Highlight text → modern handler message
(legacy bind removed after migration)

$("#code").on("select", function () {
  $("#out").text("All or part of the code is selected.");
});

$("#select-all").on("click", function () {
  $("#code").trigger("select"); // modern; was .select()
});

Click Select all → entire #code selected
Handler updates #out

Performance Notes

Migration from .select() to .on("select") does not change performance — it is a clearer, supported API.

Key Takeaways