Updated March 31, 2023
Introduction to jQuery Select()
JQuery select() function is defined as alert the user by selecting some or entire part of the text. We can define text inside the text field or in select options or in-text areas etc. The select() function is triggering the select event or it attaches the function to run whenever it selected event occurs.
Real-Time Example: Suppose we have so much data on the website but the user wants to always know which text he has selected in a special portion then we must use select() function event to achieve this.
How does select() Function work in jQuery?
This function works by using select() event with selector keyword.
Syntax:
$(selector).select()
{
//some code
}
By attaching the function to the select event:
$(selector).select(function)
{
//some code
}Make it function the jQuery application, we must include the below script inside the html page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>Note: Include jQuery code inside html page by using <script> tag, within this script tag we can write jQuery code.
Examples
Following are the example are given below:
Example #1
Select function Text field Example:
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<!--JQuery Code-->
<script>
$(document).ready(function(){ //The ready() method event occurred when the document object model has loaded
$("input").select(function(){//select() method makes the content to select
alert("Oh! Dear you have selected some text!"); //when select the select the text then it will alert the user
});
});
</script>
<!--CSS Styles-->
<style>
h1,h4
{
color: maroon;
text-align:center;
}
p
{
color: blue;
border:solid 2px green;
font-size:26px;
}
label
{
color: red;
}
</style>
</head>
<body>
<h1>Text field Select Demo</h1>
<p>
JQuery select() function is defined as alert the user by selecting some or entire part of the text. We can define text inside text field or in label area or in header area etc. The select() function is triggering the select event or it attaching the function to run whenever it selected event occurs.
</p>
<p>
Real Time Example: Let suppose we have so much of data in the website but user want to always know the which text he has selected in special portion then we must use select() function event to achieve this.
</p>
<label>Enter your Name:</label><input type="text" value="Hi, Amardeep">
<h4>Please select some text from above text field to alert the user!</h4>
</body>
</html>Output:
Example #2
Select Option Select function Demo Example:
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<!--CSS Styles-->
<style>
h1,h4
{
color: maroon;
text-align:center;
}
p
{
color: blue;
border:solid 2px green;
font-size:26px;
}
label
{
color: red;
}
</style>
</head>
<body>
<h1>Select Options Select() function Demo</h1>
<p>
JQuery select() function is defined as alert the user by selecting some or entire part of the text. We can define text inside text field or in label area or in header area etc. The select() function is triggering the select event or it attaching the function to run whenever it selected event occurs.
</p>
<p>
Real Time Example: Let suppose we have so much of data in the website but user want to always know the which text he has selected in special portion then we must use select() function event to achieve this.
</p>
<select name="EDUCBA" multiple="multiple">
<option selected="selected">Java Course</option>
<option>C Course</option>
<option>Python Course</option>
<option>Machine Learning Course</option>
<option>C# Course</option>
<option>Other Courses</option>
</select>
<div></div>
<h4>Please select some options from above multiple options to show the output to the user!</h4>
<!--JQuery Code-->
<script>
$( "select" )
.change(function() {//change function triggers when there any change in the select options
var stringOutput = "";
$( "select option:selected" ).each(function() {//Check each select options just like iteration
stringOutput=stringOutput+$(this).text()+", ";//concatinate the string
});
$("div").text(stringOutput+" is/are selected");//display output
})
.trigger("change");//triggers if change occurs
</script>
</body>
</html>Output:
Example #3
Text Area text select function Example:
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<!--JQuery Code-->
<script>
$(document).ready(function(){ //The ready() method event occurred when the document object model has loaded
$("textarea").select(function(){//select() method makes the content to select
alert("Yeah, you have selected some text area text!"); //when select the select the text then it will alert the user
});
});
</script>
<!--CSS Styles-->
<style>
h1,h4
{
color: green;
text-align:center;
}
p
{
color: red;
border:solid 2px blue;
font-size:26px;
}
label
{
color: maroon;
}
</style>
</head>
<body>
<h1>Text Area Select Demo</h1>
<p>
JQuery select() function is defined as alert the user by selecting some or entire part of the text. We can define text inside text field or in label area or in header area etc. The select() function is triggering the select event or it attaching the function to run whenever it selected event occurs.
</p>
<p>
Real Time Example: Let suppose we have so much of data in the website but user want to always know the which text he has selected in special portion then we must use select() function event to achieve this.
</p>
<label>Text Area ::</label><textarea rows="5" cols="50">Hi, Hello! I am Paramesh</textarea>
<h4>Please select some text area text from above text area field to alert the user!</h4>
</body>
</html>Output:
Recommended Articles
This is a guide to jQuery Select(). Here we also discuss the Introduction and how does select() function work in jquery? along with different examples and its code implementation. You may also have a look at the following articles to learn more –
