EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

jQuery Select Option

Home » Software Development » Software Development Tutorials » jQuery Tutorial » jQuery Select Option

jQuery Select Option

Introduction to jQuery Select Option

The jQuery Select Option is to control the multiple attributes and content for the user input information. It is special attributes used mostly in the dropdown list. It helps to user for reference of the input information or content. It controls and modifies the multiple-choice information as per user requirement. It is mostly used in the form tag of websites or web applications.

Syntax of jQuery Select Option

The basic select tag and option tag syntax is below:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

<select id = "IdName">
<option value = "values"> content </option>
<option value = "values"> content </option>
</select>

  • The select tag and option tag used inside of the body in html page.
  • The option tag is always placed inside of the select tag.

The jQuery select option syntax in the script tag is below:

$(“selector  option: selected”);

The jQuery select option is used to display selected content in the option tag.

The jQuery select option with

text syntax is below:

var variableValue =  $(“selector  option: selected”).text();

  • The “option: selected” attribute is used to select specific content in the option tag.
  • The selector is the id name (#IdName) of the select tag.

The basic syntax used in the web page is below.

<head>
<script >
$(document).ready(function() {
$("#optionselect").change(function(){
Var value =  $(“# optionselect option: selected”);
alert(value.text());
});
});
</script>
</head>
<body>
<select id = "optionselect">
<option value = "1"> content </option>
<option value = "2"> content </option>
</select>
</body>

Popular Course in this category
jQuery Training (8 Courses, 5 Projects)8 Online Courses | 5 Hands-on Projects | 28+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (5,567 ratings)
Course Price

View Course

Related Courses
Java Servlet Training (6 Courses, 12 Projects)JavaFX Training (1 Courses)

Explanation:

  • Placed in the script tag with variable.
  • The selector id selects the particular option and displays it on the alert window.

How does jQuery Select Option works?

Given below shows the working:

Step 1:

  • There is two method to add jQuery in the web page.
  • The first method is jQuery file downloads from the respective website which is jQuery.com.
  • The file is placed inside of head section of the html file.

<script src = "path/jquery-3.5.1.min.js">
</script>

  • The second method is jQuery CDN file include in the head section of the html file.

<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>

Step 2:

  • The select tag and option tag is placed in the body section of the web page.
  • The select tag is used to create multiple option list on the web page.
  • The option tag is used to create multiple list elements and their value on the web page.
  • The value attribute is placed in the option tag for maintaining a unique element in the list.

<select id = "optionselect">
<option value = "" selected disable> choose the value </option>
<option value = "1"> Tutorial </option>
<option value = "2"> Study material </option>
<option value = "3"> Subject Notes </option>
<option value = "4"> Subject Guidline </option>
</select>

Step 3:

  •  Its syntax is used on the web page.
  • The option: selected attribute place with the selector in the script tag.
  • The text() method is used along with syntax to display selecting value.

$(document) .ready(function() {
$("#optionselect").change(function(){
var values=$("#optionselect option:selected");
alert(values.text());
});
});

  • The below sample is a combination of all steps:

<!DOCTYPE html>
<html>
<head>
<script src = “https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”>
</script>
</head>
<body>
<select id = "optionselect">
<option value = "" selected disable> choose the value </option>
<option value = "1"> Tutorial </option>
<option value = "2"> Study material </option>
<option value = "3"> Subject Notes </option>
<option value = "4"> Subject Guidline </option>
</select>
<script>
$(document) .ready(function() {
$("#optionselect").change(function(){
var values=$("#optionselect option:selected");
alert(values.text());
});
});
</script>
</body>
</html>

Examples of jQuery Select Option

Given below are the examples mentioned:

Example #1

With alert message example and output is below.

Code:

<!DOCTYPE html>
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#optionselect").change(function(){
var values = $("#optionselect option:selected");
alert(values.text());
});
});
</script>
<style>
#optionselect{
height: 50px;
padding: 15px;
}
</style>
</head>
<body>
<h3> Please choose what Requirements to study </h3>
<select id = "optionselect">
<option value = " " selected disable> Choose The Method </option>
<option value = "1"> Tutorial </option>
<option value = "2"> Study material </option>
<option value = "3"> Subject Notes </option>
<option value = "4"> Subject Guideline </option>
</select>
</body>
</html>

Output:

Before:

jQuery Select Option 1

After:

jQuery Select Option 2

Explanation:

  • When option is selected then alert window popup with selected option content.

Example #2

Using the text method example and output is below.

Code:

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#optionselect").change(function(){
var values=$("#optionselect option:selected").text();
$("#selectedcontent").val(values);
});
});
</script>
<style>
#optionselect{
height: 40px;
}
#selectedcontent{
height: 35px;
}
</style>
</head>
<body>
<h3> Please choose what Requirements to study </h3>
<select id = "optionselect">
<option value = "" selected disable> Choose The Method  </option>
<option value = "1"> Tutorial </option>
<option value = "2"> Study material </option>
<option value = "3"> Subject Notes </option>
<option value = "4"> Subject Guideline </option>
</select>
<input type="text" readonly = "readonly" id = "selectedcontent" />
</body>
</html>

Output:

Before:

by the text method

After:

by the text method

Explanation:

  • With text method syntax is used in the script tag.
  • When the option is selected then selected content is displayed in another text box.

Conclusion

It is used in the user input information to reduce content size and space. It helps to choose and control multiple content options at a time. It is user_friendly and easy to the understanding event in the web application.

Recommended Articles

This is a guide to jQuery Select Option. Here we discuss the introduction to jQuery Select Option, how does it works along with respective examples. You may also have a look at the following articles to learn more –

  1. jQuery switchClass()
  2. jQuery Slider
  3. jQuery UI Button
  4. jQuery draggable()

All in One Software Development Bundle (600+ Courses, 50+ projects)

600+ Online Courses

50+ projects

3000+ Hours

Verifiable Certificates

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
jQuery Tutorial
  • Advanced
    • JQuery Modal
    • jQuery Easing
    • jQuery replace string
    • jQuery Elements
    • jQuery Ajax Methods
    • JQuery attr()
    • jQuery next()
    • jQuery prop( )
    • jQuery wrap()
    • jQuery Timer
    • jQuery Parent
    • jQuery Methods
    • JQuery Progress Bar
    • jQuery Select Option
    • Types of Selector in JQuery
    • jQuery querySelector
    • jQuery checkbox Selector
    • jQuery id Selector
    • Callback Function in jQuery
    • Jquery IF Statement
    • jQuery siblings
    • Responsive Menu jQuery
    • JQuery InputMask
    • jQuery isNumeric
    • jQuery Validate
    • jQuery Zoom
    • jQuery JSONP
    • jQuery getJSON()
    • jQuery Autocomplete
    • jQuery serializeArray
    • jQuery hasClass()
    • jQuery switchClass()
    • jQuery Datepicker
    • jQuery filter
    • jQuery find child
    • jQuery first child
    • jQuery trim
    • jQuery off
    • jQuery when
    • jQuery promise
    • jQuery zindex
    • jQuery width
    • jQuery JSON encode
    • jQuery background color
    • jQuery extend
    • jQuery Reference
    • jQuery contains
    • jQuery Tooltip
    • jQuery Sortable
    • jQuery Data Table
    • jQuery?Disable Button
  • Basic
    • What is jQuery
    • Uses Of JQuery
    • How to Install Jquery
    • jQuery Attributes
    • jQuery plugins
    • jQuery Widgets
    • Cheat sheet JQuery
  • Effects
    • jQuery Effects
    • jQuery show( )
    • jQuery hide()
    • jQuery Hide Show
    • jQuery delay()
    • Slide in jQuery
    • Animate in jQuery
    • jQuery val()
    • jQuery slideUp()
    • jQuery fadeIn()
    • jQuery fadeOut()
    • jQuery fadeTo()
    • JQuery fadeToggle
    • jQuery toggle()
    • jQuery Slidetoggle()
    • jQuery slideDown()
    • JQuery Blur()
    • jQuery Chaining
    • jQuery is Visible
  • Events
    • jQuery Events
    • jQuery delegate( )
    • jQuery hover()
    • jQuery keydown()
    • jQuery keyup()
    • jQuery Keypress()
    • jQuery focus()
    • jQuery load()
    • jQuery onload
    • jQuery unload()
    • jQuery change()
    • jQuery mouseenter()
    • jQuery mouseover()
    • jQuery mousedown
    • jQuery mouseout()
    • jQuery mouseleave()
    • JQuery closest
    • jQuery ready
    • jQuery Slider
    • jQuery redirect
    • jQuery bind()
    • jQuery submit()
    • jQuery serialize()
    • JQuery noConflict
  • jQuery HTML/CSS
    • jQuery html()
    • jQuery Clone()
    • jQuery detach()
    • jQuery height()
    • jQuery innerHeight()
    • jQuery outerHeight()
    • jQuery wrapInner()
    • jQuery position()
    • jQuery draggable()
    • jQuery after()
    • jQuery remove()
    • jQuery prepend()
    • jQuery addClass()
    • jQuery wrapAll()
    • jQuery unwrap()
    • jQuery append()
    • jQuery toggleClass()
    • jQuery empty()
    • jQuery Outerwidth()
    • jQuery insertAfter()
    • jQuery innerWidth()
    • jQuery before()
    • jQuery appendTo()
    • jQuery text()
    • jQuery scrollTop()
    • Jquery Confirm
  • Form
    • jQuery Form Validation
  • jQuery UI
    • jQuery UI
    • jQuery UI effect()
    • jQuery UI Button
    • jQuery UI Tabs
    • jQuery UI Dialog
    • jQuery UI Selectmenu
    • jQuery UI Selectable
    • jQuery UI Droppable
  • Interview Questions
    • jQuery Interview Questions

Related Courses

JQuery Training Course

Java Servlet Training Course

JavaFX Training Course

Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - JQuery Training Course Learn More