jQuery Select Event

What Is the select Event?

The select event fires when the user highlights text inside a text input or textarea. Bind with .on("select", handler) (jQuery 1.7+). Merely placing the cursor does not fire it — at least one character must be selected.

$("#target").on("select", function () {
  // user highlighted text inside the field
});

$("#other").on("click", function () {
  $("#target").trigger("select"); // runs handlers + selects all text
});

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

How to Use select

Bind on a text field, optionally pass data, then trigger when you want to select all text.

1. Bind with .on("select", handler) on an input or textarea.
2. Optionally pass eventData: .on("select", data, handler).
3. Trigger with .trigger("select") to run handlers and select all text.
4. Read the highlight with selectionStart / selectionEnd (or getSelection()).
5. Do not use this for HTML <select> dropdowns — use change.

Pseudocode

call input.on("select", handler)
    → store handler on the field

when user highlights text (drag / double-click / Shift+arrow):
    fire "select" on input
    call handler(event)

when user only clicks to place caret:
    select does NOT fire

call input.trigger("select")
    → run bound handlers
    → browser default: select all text in the field

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

Cheat Sheet

Keep these facts handy while wiring text-selection UX.

Live Preview

Highlight text in the demo field, or run an action to .trigger("select") (selects all).

Ready — highlight text or pick an action.

jQuery Examples

Short, copy-ready snippets based on the official jQuery API demos. Open Try It Yourself for a live editor.

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

Highlight any characters in #target
#out shows "Handler for select called."

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

$("#other").on("click", function () {
  $("#target").trigger("select");
});

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

$(":input").on("select", function () {
  $("#out").text("Something was selected in " + (this.id || this.name || "a field"));
});

Highlight text in any matched input
#out shows which field fired select

$("#notes").on("select", function () {
  var start = this.selectionStart;
  var end = this.selectionEnd;
  var text = $(this).val().slice(start, end);
  $("#out").text("Selected " + (end - start) + " char(s): " + text);
});

Highlight "hello" → "Selected 5 char(s): hello"

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

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

Performance Notes

Select can fire often while users adjust a highlight. Keep callbacks small — update a label or show a toolbar tip.

Key Takeaways