jQuery :selected Selector
The jQuery :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.
HTML
<!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.
HTML
<!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:
Please Login to comment...