.select()S2C Home « Events « .select()

Select event handler.

Description

The .select() method is used to bind an event handler to the JavaScript select event or trigger that event on the specified element.

  • The select event is sent to an element when the element is selected by the user.
  • This event is limited to <input type=text> and <textarea> elements.
  • Setting the location of the insertion point will not trigger the event, only selecting some text will unless triggered manually using the select() signature to manually trigger the event.

Syntax

Signature Description
.select( )Trigger the select JavaScript event on the specified element.
.select( handler(eventObject) )Bind an event handler to the select JavaScript event.
.select( [eventData ,] handler(eventObject) )Bind an event handler to the select JavaScript event, optionally passing an object of data.

Parameters

Parameter Description Type
handler( eventObject )A function to execute each time the event is triggered.Function
eventDataAn object of data to pass to the event handler.Anything

Return

A jQuery object.

.select( ) Example Top

Trigger the select JavaScript event on the specified element.

  • This signature is a shortcut for .trigger('select').

In the example below we show a new message in the 'div' element with an id of 'div1' has some text selected.

When some text from the input field is selected the select JavaScript event on the 'div1'. This then fires off the $('#div1').select(function(){}) code which outputs the message.


$(function(){
  $('#div1').select(function () {
    $('#div1').append('<code>select</code> JavaScript event triggered.<br />');
  });
  $('#input1').click(function() {
    $('#div1').select();
  });
});

.select( handler(eventObject) ) Example Top

Bind an event handler to the select JavaScript event.

  • This signature is a shortcut for .on('select', handler).

In the example below we show a new message in the 'p' element with an id of 'scrollspan1' each time the input element with an id of 'input2' has some text selected.

When some text from the input field is selected the select JavaScript event fires off the addText(event) mothod which outputs a message.

What we are doing here is passing across the event object to the function addText(event)method. The data we specify gets tagged onto the event.data property.



$(function(){
  $('#input2').select(addText);

  function addText(event) {
    $('#scrollspan1').append('select 1 **JavaScript event triggered**<br>');
  }
});

We will show a message here.



.select( [eventData ,] handler(eventObject) ) Example Top

Bind an event handler to the select JavaScript event, optionally passing an object of data.

  • This signature is a shortcut for .on('select', handler).

In the example below we show a new message in the 'p' element with an id of 'scrollspan2' each time the input element with an id of 'input3' has some text selected.

When some text from the input field is selected the select JavaScript event fires off the $('#input3).select({ param1: '#scrollspan2', param2: 'select 2 ', param3: '**JavaScript event triggered** ' }, addText2); code.

What we are doing here is passing across the event object to the function addText2(event). The map we specify, in our case { param1: '#scrollspan2', param2: 'select 2 ', param3: '**JavaScript event triggered** ' } gets tagged onto the event.data property. We then access this parameter in the function via event.data.param and use it as part of the appended data.


$(function(){
  $('#input3').select({ param1: '#scrollspan2', param2: 'select 2 ', 
                         param3: '**JavaScript event triggered**<br>' }, addText2);
  function addText2(event) {
    $(event.data.param1).append(event.data.param2 + event.data.param3);
  }
});

We will show a message here.