How To Get Selected Option Value In Jquery

by

One of the most common tasks in web development is to get the value of a selected option from a dropdown list, also known as a <select> element. In this blog post, we will explore how to achieve this using jQuery quickly and easily.

Prerequisites

To follow along with this tutorial, make sure you have the following in place:

  • Basic knowledge of HTML, CSS, and JavaScript
  • jQuery library included in your project

HTML Structure

Let’s create a simple <select> element with a few options:

    <select id="fruits">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="cherry">Cherry</option>
        <option value="orange">Orange</option>
    </select>

Using jQuery to Get Selected Option Value

The simplest method to get the selected option value using jQuery is to use the val() function. Here’s an example:

    $(document).ready(function() {
        $("#fruits").change(function() {
            var selectedValue = $(this).val();
            console.log("Selected value: " + selectedValue);
        });
    });

In the example above, we first wait for the DOM to be ready using the $(document).ready() event. Then, we attach an event listener to the <select> element with the ID “fruits”. When the user changes the selected option, the change event is triggered, and our anonymous function is executed.

Inside the function, we use the $(this).val() statement to get the value of the selected option. The $(this) expression refers to the <select> element itself. Finally, we log the selected value to the console.

Conclusion

Getting the value of a selected option using jQuery is quite simple and straightforward. By using the val() function and attaching a change event listener to the <select> element, you can quickly obtain the selected value and use it as needed in your web application.