How To Get Selected Option Value In jQuery
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Pragati
In this article we will show you the solution of how to get selected option value in jQuery, to locate the value of the selected item in a pick box or dropdown list, use the jQuery:selected selection and the val() method.
From pick boxes and dropdowns, jQuery select value enables you to retrieve that value of a selected option. To do this, jQuery provides two methods: text() and val().
To determine the value for such a selected item in a pick box or dropdown, use the jQuery: selected selector in conjunction only with the val() or text() method.
We may obtain the value to be transmitted to the server using the val() function and or the text value of such chosen element using the text() method.
Basically, there are only two values that may be obtained for select items.
The initial value, which we may obtain using val, has to be delivered to the server().
The selected element's text value, which can be obtained using the text() method, is the second value. To retrieve that text value from the chosen option, we can use jQuery.
We frequently use the choose option when working on a form-related user interface, and in order to use it, we will undoubtedly require the values that are currently being selected.
Step By Step Guide On How To Get Selected Option Value In jQuery :-
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
</head>
<body>
<select id="selectVal">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<script>
function displayNum() {
console.log($("select#selectVal").val());
}
$("select#selectVal").change(displayNum);
</script>
</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.
- 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 select and option.
- After that we again opened the <script> tag and then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- Then we close program using </script> </body> </html>
Conclusion :-
I hope this article on how to get selected option value in jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
