jQuery Get Selected Option Value
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Riya
In this article we will show you the solution of jQuery get selected option value, to locate the selected option value in a pick box or dropdown list, combine the val() function and the jQuery:selected selection.
From pick boxes and dropdowns, jQuery select value enables you to retrieve the value of a selected option.
To do this, jQuery provides two methods: text() and val(). To determine a value for the selected item in a pick box or dropdown, use the jQuery selected selector in conjunction with the val() or text() method.
We may get the value to just be transmitted to the server using the val() function or the textual value of a chosen element using the text() method.
Step By Step Guide On jQuery Get Selected Option Value :-
<!DOCTYPE html>
<head>
<title>jQuery Get Selected Option Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
$("#SubjectsList").change(function () {
var selectedSubject = $("#SubjectsList option:selected").val();
alert("You have selected the country - " + selectedSubject);
});
});
</script>
<style>
#divstyle {
width: 500px;
height: 250px;
padding-top: 20px;
padding-left: 5px;
font-size: 24px;
text-align: center;
color: maroon;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id ="divstyle">
<h3>jQuery select value using val() method</h3>
<label style="font-size: 20px;">Select:</label>
<select id="SubjectsList">
<option value="eng">English</option>
<option value="phy">Physics</option>
<option value="chem">Chemistry</option>
<option value="maths">Mathematics</option>
</select>
</div>
</body>
</html>
- The first step is to write <HTML>, which tells the browser what version of HTML we're using. A tag is the first element of an HTML document.
- Use the <head> tag to describe the project's heading. In contrast to the final brackets, which are closed, the title and final brackets both are open.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- The script is then closed and head closed.
- The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
- Then we create a jquery select value using val() method.
- Then again the <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used for button variable value.
- After that we close </script></div></body></html>
Conclusion :-
I hope this article on jQuery get selected option value helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
