jQuery :selected Selector

Last Updated : 11 Jul, 2025

The jQuery :selected selector is used to select option elements that are pre-selected.

Note: To retrieve only the check-boxes or radio buttons, use the :checked selector.

Syntax:

$(":selected")

Below are examples that illustrate the :selected selector in jQuery:

Example 1: This example uses CSS property to all pre-selected elements. The background-color of pre-selected element is red, which is changed by:selected selector.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        jQuery | :selected Selector
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <!-- Script to set style to the selected selector -->
    <script>
        $(document).ready(function () {
            $(":selected").css("background-color", "green");
            $(":selected").css("color", "white");
        });
    </script>
    <!-- CSS property to set Style to the element -->
    <style>
        option {
            font-weight: bold;
            font-size: 25px;
            color: green;
        }

        select {
            font-weight: bold;
            font-size: 25px;
            color: green;
        }
    </style>
</head>

<body style="text-align:center;">
    <h1>
        jQuery | :selected Selector
    </h1>
    <select>
        <option>GFG_1</option>
        <option selected="selected">
            GFG_2
        </option>
        <option>GFG_3</option>
        <option>GFG_4</option>
    </select>
</body>

</html>

Output:

jquery-4

Example 2: This example is similar to previous-one.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        jQuery | :selected Selector
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <!-- Script to set background-color of
        selected element -->
    <script>
        $(document).ready(function () {
            $(":selected").css("background-color", "green");
        });
    </script>
    <style>
        option {
            font-weight: bold;
            font-size: 25px;
        }

        select {
            font-weight: bold;
            font-size: 25px;
        }
    </style>
</head>

<body style="text-align:center;">
    <h1>
        jQuery | :selected Selector
    </h1>
    <select>
        <option selected="selected">
            Computer Network
        </option>
        <option>Data Structure</option>
        <option>Algorithm</option>
        <option>Operating System</option>
    </select>
</body>

</html>