Skip to content
Related Articles

Related Articles

Improve Article
jQuery | :selected Selector
  • Last Updated : 22 Feb, 2019

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

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

Syntax:

$(":selected")

Below examples illustrate the :selected selector in jQuery:

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






<!DOCTYPE html>  
<html>  
  
<head
    <title
        jQuery | :selected Selector
    </title>
      
    <script src=
    </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:

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




<!DOCTYPE html>  
<html>  
  
<head
    <title
        jQuery | :selected Selector
    </title>
  
    <script src=
    </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>     

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :