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 .