JQuery Select Event Example

The select event occurs when some text has been selected in an element. For instance, when text is selected in the text field, the select event triggers. The select event is sent to an element when the user makes selection inside the text field. It binds event handler to select event or define a function which is to be executed when select event occurs on the selected elements. The select event in jQuery is limited to <input type=”text”> field and <textarea> boxes.

JQuery Select() Syntax

$(selector).select(function)

It has parameter called function which specifies the function to be run when select event occurs.

JQuery Select() Example

<!doctype html>
<head>
<title>JQuery Select Event</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Select Event Example</h2>
<style>
   span {
      color: red;
      display: none;
}
</style>
<script type="text/javascript">
   $(document).ready(function(){
      $("input").select(function(){
        $( "span" ).css( "display", "inline" ).fadeOut( "slow" );
      });
   });
</script>
<body>
   <input type="text" value=""/>
   <p><span>text is selected!!!</span></p>
</body>
</html>

As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
$(“input”).select(function()) line defines select event which occurs when some text has been selected in the text field.
$( “span” ).css( “display”, “inline” ).fadeOut( “slow” ); line uses CSS properties to display the line in style format and fadeout() method defines fading effect from visible to hidden for selected elements and specifies the speed of the fading effect.
After executing the program, you will get textbox in the browser. Enter some text in the text box and select the text then you will be getting text is selected!!!line in the browser.

JQuery Select Event Demo

Try Demo : JQuery Select Event

When you run the above example, you would get the following output :

JQuery Select() Syntax

JQuery Select() Example

JQuery Select Event Demo

About Krishna Srinivasan