¿Cómo obtener texto seleccionado de una lista desplegable usando jQuery?

Podemos seleccionar texto o también podemos encontrar la posición de un texto en una lista desplegable usando la opción: atributo seleccionado o usando el método val() en jQuery.

Usando el método val() :
El método val() es un método incorporado en jQuery que se usa para devolver o establecer el valor de los atributos de los elementos seleccionados.

Sintaxis:

$(selector).val(parameter)

Parámetro: el parámetro es opcional.

Ejemplo :

<html>
<head>
    <title>jQuery Selector</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
    <script>
        $(document).ready(function() {
            $("#submit").click(function() {
                alert($("#myselection").val());
            });
        });
    </script>
    <style>
        div {
            width: 50%;
            height: 200px;
            padding: 10px;
            border: 2px solid green;
        }
    </style>
</head>
  
<body>
    <div>
  
        <p>The selected value:</p>
        <select id="myselection">
            <option value="1">First</option>
            <option value="2">Second</option>
        </select>
        <br>
        <br>
        <button id="submit">Submit</button>
  
    </div>
</body>
</html>

Salida:
antes de hacer clic en el botón.

Después de hacer clic en el botón.

Al usar option:selected:
El método option:selected es una forma en jQuery que se usa para devolver el elemento seleccionado de una lista del elemento.

Sintaxis:

 $("#selector option:selected");

Parámetro: No se requiere ningún parámetro.

Ejemplo :

<html>
<head>
    <title>jQuery Selector</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
  
    <script>
        $(document).ready(function() {
            $("#submit").click(function() {
                var value = $("#myselection option:selected");
                alert(value.text());
            });
        });
    </script>
    <style>
        div {
            width: 50%;
            height: 200px;
            padding: 10px;
            border: 2px solid green;
        }
    </style>
</head>
  
<body>
    <div>
  
        <p>The selected value:</p>
        <select id="myselection">
            <option value="1">First</option>
            <option value="2">Second</option>
        </select>
        <br>
        <br>
        <button id="submit">Submit</button>
  
    </div>
</body>
</html>

Salida:
antes de hacer clic en el botón.

Después de hacer clic en el botón.

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .

Publicación traducida automáticamente

Artículo escrito por Sruti Rai 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 *