jQuery Selected Selector with Examples

In this article, I am going to discuss jQuery Selected Selector with Examples. Please read our previous article, where we discussed How to get Selected Checkbox Text and Value in jQuery. At the end of this article, you will understand everything about jQuery Selected Selector.

What is jQuery Selected Selector?

Previously we have seen that how to get the checked values of radio or checkbox elements. Now we will see that how to get the values of the dropdown list in jQuery. We use the checked selector in radio or checkbox elements. Now for the <option> element if we have to get the option that the user has selected, then we need to use this selected selector.

Syntax: $(‘select option:selected’): This will target the option elements which are children of <select> and which are selected

Note: Because :selected is a jQuery extension and not part of the CSS specification, queries using :selected cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :selected to select elements, first select the elements using a pure CSS selector, then use .filter(“:selected”).

Reference: https://api.jquery.com/selected-selector/

Example: Extracting value of the Radio button

In the below example, we have a basic dropdown list. We have attached a change() event to the <select> element of class ‘selectcountry’. Whenever we will make any change in the dropdown list, the method will be triggered. Inside that, we are targeting those options which are selected by the user and alerting them

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Selected Selector</title>
</head>
<body>
    <section>
        <form action="/">
            <fieldset>
                <label>Select the country</label>
                <select name="select" class="selectcountry">
                    <option value="USA">United States of America</option>
                    <option value="IND">India</option>
                    <option value="UK">United Kingdom</option>
                </select>
            </fieldset>
        </form>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".selectcountry").change(function () {
                var selectedCountry = $(".selectcountry option:selected").val();
                alert("You have selected the country - " + selectedCountry);
            });
        });
    </script>
</body>
</html>

Once you run the above HTML code, you will get the following HTMP Page in the browser.

Now, from the above dropdown list select India and as soon as you select India, the change event is fired and you will get the following alert.

Once you click on the OK button, look at the dropdown list, the selected option is changed to India as shown below.

Example2: Extracting text of the radio button

In the previous example, we are extracting the value of the option element. If we want to retrieve the text inside the option element then we have to change the val() method to the text() method which is shown in the below example.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Selected Selector</title>
</head>
<body>
    <section>
        <form action="/">
            <fieldset>
                <label>Select the country</label>
                <select name="select" class="selectcountry">
                    <option value="USA">United States of America</option>
                    <option value="IND">India</option>
                    <option value="UK">United Kingdom</option>
                </select>
            </fieldset>
        </form>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".selectcountry").change(function () {
                var selectedCountry = $(".selectcountry option:selected").text();
                alert("You have selected the country - " + selectedCountry);
            });
        });
    </script>
</body>
</html>

Now, save the changes and refresh the web page, and then select the United Kingdom from the dropdown list and as soon as you select the United Kingdom, you will get the following alert which shows the text of the selected option element i.e. United Kingdom.

Example3: Selecting multiple options from the dropdown list

In the previous examples, we are having the dropdown lists from which only one option can be selected. What if there is a multiple selected dropdown? In the below example, we are creating an empty array. And for each selected option by the user, we are pushing the option text into our array and alerting the final result.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Selected Selector</title>
</head>
<body>
    <section>
        <form action="/">
            <fieldset>
                <legend>Select the position you want to apply</legend>
                <select name="position" class="selectposition" multiple>
                    <option value="webdev">Web Developer</option>
                    <option value="webdesg">Web Designer</option>
                    <option value="graphic">Graphic Designer</option>
                    <option value="business">Business Analyst</option>
                    <option value="telecall">Telecaller Executive</option>
                </select>
            </fieldset>
        </form>
    </section>
    </br>
    <button class="demo" value="submit">Submit</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                var positions = [];
                $.each($(".selectposition option:selected"), function () {
                    positions.push($(this).text());
                });
                alert("You have selected the positions - " + positions.join(", "));
            });
        });
    </script>
</body>
</html>

Now, run the above code and you will get the following HTML Page.

Now select multiple options from the dropdown list and click on the submit button as shown in the below image. To select multiple options, hold down the CTRL key and select the options.

Now, as soon as, you click on the Submit button, you will get the alert box with selected options text value as shown in the below image.

Example4: More one dropdown list

When we have more than one dropdown list, then what can we do? Let see that. In the below example, we have two <select> elements with two different classes (position and tech). We are creating a function and passing a parameter ‘className’ and when we are invoking the function, we are changing the class names dynamically i.e. position and tech.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Selected Selector</title>
</head>
<body>
    <section>
        <form action="/">
            <fieldset>
                <legend>Select the position you want to apply</legend>
                <select name="position" class="position" multiple>
                    <option value="webdev">Web Developer</option>
                    <option value="webdesg">Web Designer</option>
                    <option value="graphic">Graphic Designer</option>
                    <option value="business">Business Analyst</option>
                    <option value="telecall">Telecaller Executive</option>
                </select>
            </fieldset>
            </br>
            <fieldset>
                <legend>Select the technologies you know</legend>
                <select name="tech" class="tech" multiple>
                    <option value="html">HTML</option>
                    <option value="css">CSS</option>
                    <option value="jquery">jQuery</option>
                    <option value="react">React JS</option>
                    <option value="angular">Angular</option>
                </select>
            </fieldset>
        </form>
    </section>
    </br>
    <button class="demo" value="submit" id="position">Get positions</button>
    <button class="demo" value="submit" id="tech">Get technologies</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button#position").click(function () {
                getOptions('.position');
            });
            $("button#tech").click(function () {
                getOptions('.tech');
            });
            function getOptions(className) {
                var options = [];
                $.each($(`${className} option:selected`), function () {
                    options.push($(this).text());
                });
                alert("You have selected the options - " + options.join(", "));
            }
        });
    </script>
</body>
</html>

Now, run the above code and you should get the following page in the browser.

Now, select some options from both the dropdown list. Here, I have selected two options from the position dropdown list as well as two options from the technologies dropdown list.

Once you selected the options, then click on the Get positions button. As soon as you click on the Get positions button, it will show you the following alert.

As you can see in the above image, it is showing the text of the position that we have selected in the positions dropdown list. Then click on the Ok button from the alert box. Now, click on the Get technologies button and as soon as you click on the Get technologies button, it will popup the following alert box with selected technologies text.

In the next article, I am going to discuss jQuery Disabled and Enabled Selector with Examples. Here, in this article, I try to explain jQuery Selected Selector with Examples and I hope you enjoy this jQuery Selected Selector article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.