Con jQuery, es fácil escribir una línea de código para cambiar el valor seleccionado de una lista desplegable. Supongamos que tiene un elemento de selección y necesita seleccionar una de sus opciones en función de uno de sus valores. Para lograr esta hazaña, puede usar varios métodos, dos de esos métodos se explicarán a continuación.
Función utilizada:
- Función val(): Establece o devuelve el atributo de valor de los elementos seleccionados.
- Función attr(): Establece o devuelve los atributos y valores de los elementos seleccionados.
Ejemplo 1: Este ejemplo usa la función val() para establecer la opción correspondiente al valor pasado.
<!DOCTYPE html> <html> <head> <title> Change selected value of a drop-down list </title> <style> div { width:15%; background-color:green; padding:8px; color:azure; } </style> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(()=>{ $("#select").val('2'); }); </script> </head> <body> <div> <p id="gfg">GeeksforGeeks courses:</p> <select id="select"> <option value="0">System Design</option> <option value="1">DSA-Online</option> <option value="2">Fork Python</option> <option value="3">Fork Java</option> </select> </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo usa la función attr() para asignar el atributo seleccionado a la opción correspondiente.
<!DOCTYPE html> <html> <head> <title> Change selected value of a drop-down list </title> <style> div { width:15%; background-color:green; padding:8px; color:azure; } </style> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(()=>{ $("#select option[value=3]").attr('selected', 'selected'); }); </script> </head> <body> <div> <p id="gfg">GeeksforGeeks courses:</p> <select id="select"> <option value="0">System Design</option> <option value="1">DSA-Online</option> <option value="2">Fork Python</option> <option value="3">Fork Java</option> </select> </div> </body> </html>
Producció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 AnkitMishra16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA