jQuery .select() Method

What You’ll Learn

The .select() method is jQuery’s legacy shorthand for binding and triggering the select event when users highlight text in inputs and textareas. This tutorial covers .select(handler) since 1.0, .select(eventData, handler) since 1.4.3, no-argument .select() as a trigger (select-all), migration to .on("select") and .trigger("select"), and why the binding form is deprecated since jQuery 3.3. Not the HTML <select> dropdown — see the jQuery select event tutorial for the modern API.

Introduction

Before jQuery 1.7 unified events with .on() and .off(), every common event had a matching shorthand — .select(), .change(), .blur(), and more. The .select() method let you react when a user highlights text in an input or textarea in one short call: $("#target").select(function(){ ... }). It remains in jQuery 3.x for backward compatibility but is marked deprecated. Do not confuse it with HTML <select> dropdown elements.

Understanding .select() matters when reading older text-editor, copy-button, and formatting-toolbar tutorials in legacy codebases. The method does two distinct jobs: with a function argument it binds; with no arguments it triggers and typically selects all text. Modern jQuery splits those roles explicitly — .on("select", handler) for binding and .trigger("select") for firing.

Understanding the .select() Method

The official jQuery API describes .select() as a way to bind an event handler to the select event, or trigger that event on an element. When you pass a handler, jQuery registers it on each matched text input or textarea and calls it when the user highlights characters — the same select event that .on("select") handles today. It does not apply to HTML <select> dropdowns.

When you call .select() with no arguments, jQuery synthetically fires the select event on each matched element. Bound handlers run and the browser default action usually selects all text in the field — useful for “Select all” buttons. This trigger behavior is equivalent to .trigger("select").

📝 Syntax

The .select() method has three signatures from the official jQuery API. The binding forms are deprecated; the trigger form remains valid but .trigger("select") is preferred:

1. Bind a handler — .select( handler ) (since 1.0, deprecated 3.3)

.select( handler )

• handler — function executed each time select fires: function( event ) { ... }.
• Returns the jQuery object for chaining.
• Modern replacement: .on( "select", handler ).

2. Bind with eventData — .select( [eventData], handler ) (since 1.4.3, deprecated 3.3)

.select( [eventData], handler )

• eventData — optional object available in the handler as event.data.
• Modern replacement: .on( "select", eventData, handler ).

3. Trigger the event — .select() (since 1.0)

.select()

• No arguments — triggers select on every matched element.
• Runs bound select handlers.
• Preferred replacement: .trigger( "select" ).

Official jQuery API migration note

// Deprecated binding
$( "#target" ).select( function() {
  alert( "Handler for `select` called." );
} );

// Modern binding
$( "#target" ).on( "select", function() {
  alert( "Handler for `select` called." );
} );

// Deprecated trigger
$( "#target" ).select();

// Modern trigger
$( "#target" ).trigger( "select" );

Return value

• All .select() signatures return the original jQuery object for chaining.
• Handler return values are ignored unless you use return false (equivalent to preventDefault() + stopPropagation()).

Examples Gallery

Five examples cover binding, eventData, triggering, migration from .select() to .on("select"), and method chaining. Use the Try-it links to run each snippet in the browser. Remember: binding with .select(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

$( "#target" ).select( function() {
  alert( "Handler for `select` called." );
} );

User highlights text in #target
→ handler runs, #out text updates

Deprecated — prefer .on("select", fn) for new code

$( "#bio" ).select( { toolbar: "basic" }, function( event ) {
  var len = this.selectionEnd - this.selectionStart;
  $( "#out" ).text(
    "Toolbar: " + event.data.toolbar + " | " + len + " chars highlighted"
  );
} );

Highlight text in #bio → "Toolbar: basic | N chars highlighted"

Change selection → count updates each time select fires

eventData.toolbar available as event.data in handler

var count = 0;

$( "#target" ).select( function() {
  count++;
  $( "#out" ).text( "Target select handler fired (count: " + count + ")" );
} );

$( "#fire" ).click( function() {
  $( "#target" ).select();
} );

Highlight text in #target → count increments

Click #fire → $("#target").select() → same handler runs

No-arg .select() is trigger shorthand — selects all text; prefer .trigger("select")

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

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

Highlight text in #legacy → legacy deprecation message

Highlight text in #modern → modern .on("select") message

Behavior is identical — only the API name differs

$( "#bio" )
  .select( function() {
    $( "#notice" ).text( "Text selected — first handler." ).show();
  } )
  .select( function() {
    var len = this.selectionEnd - this.selectionStart;
    $( "#count" ).text( len + " chars" );
  } );

User highlights text in #bio

First handler updates #notice

Second handler updates #count with selection length

Both handlers run in bind order on each text selection

🚀 Common Use Cases

• Reading legacy code — recognize $("#target").select(fn) as equivalent to .on("select", fn) in older editor scripts.
• Text selection toolbar — legacy tutorials bind .select() to show formatting buttons when the user highlights text.
• Select-all buttons — $("#target").select() on button click — replace with .trigger("select").
• Shared eventData — $("#editor").select({ toolbar: "basic" }, fn) passes toolbar metadata without closures.
• Selection length display — chained .select(fn) calls show notices and character counts on highlight.
• Maintaining WordPress themes — many admin and front-end scripts still use .select() — know how to migrate safely.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .select(handler) or .select(eventData, handler) in new code. Use .on("select") instead.
• Bind with .select(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .select() triggers the event since jQuery 1.0 — prefer .trigger("select").
• .select() does not support event delegation — use .on("select", selector, fn) for dynamic textareas in editors.
• Applies to text <input> and <textarea> only — not HTML <select> dropdowns (those use change).
• Remove handlers with .off("select") — not by calling .select(undefined).
• For the full modern select event guide — delegation, selected text, and select-all patterns — see the jQuery select event tutorial.

💡 Best Practices