¿Cómo obtener el texto de la etiqueta de opción específica usando jQuery?

Para seleccionar el texto de una opción seleccionada o cualquier opción específica, jQuery permite hacerlo fácilmente mediante sus selectores específicos. El selector se utiliza para seleccionar el elemento específico.

Ejemplo: este ejemplo selecciona el texto de la etiqueta de opción específica (GFG_2).

<!DOCTYPE html>  
<html>  
  
<head> 
    <title> 
        Get text of specific option tag
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
</head> 
         
<body style = "text-align:center;">  
     
    <h1 style = "color:green;" >  
        GeeksForGeeks  
    </h1>  
   
    <select id='GFG_list'>
        <option value='GFG_1'>GFG_A</option>
        <option value='GFG_2'>GFG_B</option>
        <option value='GFG_3'>GFG_C</option>
    </select>
      
    <br><br>
      
    <button id="GFG_Button" onclick = "getText()">
        getText
    </button> 
      
    <p id = "GFG_P" style="color:green;font-size:20px;"></p>
      
    <script>
        function getText(){
            var el = document.getElementById("GFG_P");
            el.innerHTML = $("#GFG_list option[value='GFG_2']").text();
        }
    </script> 
</body>  
  
</html>  

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Ejemplo: Este ejemplo selecciona el texto de la etiqueta de opción actualmente seleccionada.

<!DOCTYPE html>  
<html>  
  
<head> 
    <title> 
        Get text of specific option tag
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
</head> 
         
<body style = "text-align:center;">  
     
    <h1 style = "color:green;" >  
        GeeksForGeeks  
    </h1>  
   
    <select id='GFG_list'>
        <option value='GFG_1'>GFG_A</option>
        <option value='GFG_2'>GFG_B</option>
        <option value='GFG_3'>GFG_C</option>
    </select>
      
    <br><br>
      
    <button id="GFG_Button" onclick = "getText()">
        getText
    </button> 
      
    <p id = "GFG_P" style = "color:green; font-size: 20px;"></p>
      
    <script>
        function getText(){
            var el = document.getElementById("GFG_P");
            el.innerHTML = $("#GFG_list option:selected").text();
        }
    </script> 
</body>  
  
</html> 

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botó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 *