En este artículo, aprendemos cómo obtener la opción seleccionada de la lista desplegable. Este artículo requiere cierta familiaridad con HTML, CSS, JavaScript y jQuery. Podemos resolver este desafío usando el método jQuery val() .
El método val() en jQuery se usa para establecer o devolver el valor de un atributo para los elementos seleccionados. Este método se aplica a los elementos de formulario HTML.
Sintaxis:
$(selector).val() // or $(selector).val(value) // or $(selector).val(function(index, current_value))
Este método devuelve el elemento seleccionado con los cambios especificados realizados por el método val().
Ejemplo:
HTML
<html>
<head>
<title>
How to get selected option from
Dropdown list using jQuery?
</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
</head>
<body style="border: 2px solid green; min-height: 240px;">
<div style="display: flex; justify-content: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
</div>
<select class="form-select mx-auto"
aria-label="Default select example"
style="width: 200px; margin-top: 20px;"
id="lang">
<option selected>Select Language</option>
<option>C</option>
<option>Java</option>
<option>Python</option>
</select>
<div id="show" style="display: flex;
justify-content: center; margin-top: 20px;">
</div>
</body>
<script>
$('#lang').on('input', function () {
$('#show').text($('#lang').val());
})
</script>
</html>
Producción:
producción
¿Como funciona?
Cada vez que seleccione un elemento del menú desplegable, se mostrará debajo del menú desplegable al mismo tiempo.
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA