jQuery | :selector seleccionado

El selector :selected se utiliza para seleccionar elementos de opción que están preseleccionados.

Nota: Para recuperar solo las casillas de verificación o los botones de radio, use el selector :checked.

Sintaxis:

$(":selected")

Los siguientes ejemplos ilustran el selector seleccionado en jQuery:

Ejemplo 1: este ejemplo utiliza la propiedad CSS para todos los elementos preseleccionados. El color de fondo del elemento preseleccionado es rojo, que se cambia con: selector seleccionado.

<!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>   

Producción:

Ejemplo 2: Este ejemplo es similar al anterior.

<!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>     

Producción:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *