En este artículo, aprenderemos a obtener los valores seleccionados en la lista desplegable en Javascript. Podemos obtener los valores usando 2 métodos:
- Usando la propiedad de valor
- Al usar la propiedad selectedIndex con la propiedad option
Entenderemos ambos métodos a través de los ejemplos.
Método 1: Usando la propiedad de valor :
El valor del elemento seleccionado se puede encontrar utilizando la propiedad de valor en el elemento seleccionado que define la lista. Esta propiedad devuelve una string que representa el atributo de valor del elemento <opción> en la lista. Si no se selecciona ninguna opción, no se devolverá nada.
Sintaxis:
selectElement.value
Ejemplo: Este ejemplo describe la propiedad de valor que se puede encontrar para los elementos seleccionados.
HTML
<!DOCTYPE html>
<head>
<title>
How to get selected value in
dropdown list using JavaScript?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to get selected value in dropdown
list using JavaScript?
</b>
<p> Select one from the given options:
<select id="select1">
<option value="free">Free</option>
<option value="basic">Basic</option>
<option value="premium">Premium</option>
</select>
</p>
<p> The value of the option selected is:
<span class="output"></span>
</p>
<button onclick="getOption()"> Check option </button>
<script type="text/javascript">
function getOption() {
selectElement = document.querySelector('#select1');
output = selectElement.value;
document.querySelector('.output').textContent = output;
}
</script>
</body>
</html>
Producción:
propiedad de valor
Método 2: usar la propiedad de índice seleccionado con la propiedad de opción :
La propiedad selectedIndex devuelve el índice del elemento actualmente seleccionado en la lista desplegable. Este índice comienza desde 0 y devuelve -1 si no se selecciona ninguna opción. La propiedad options devuelve la colección de todos los elementos de opciones en la lista desplegable <select>. Los elementos se ordenan según el código fuente de la página. El índice encontrado antes se puede usar con esta propiedad para obtener el elemento seleccionado. El valor de esta opción se puede encontrar usando la propiedad de valor.
Sintaxis:
selectElement.options[selectElement.selectedIndex].value
El valor de la propiedad:
- selectedIndex : se utiliza para establecer u obtener el índice del elemento <option> seleccionado en la colección.
- length : es una propiedad de solo lectura que se usa para obtener el número de elementos <option> en la colección.
Valor de retorno: Devuelve el objeto HTMLOptionsCollection especificando todos los elementos <option> en el elemento <select>. El elemento se ordenará en la colección.
Ejemplo: este ejemplo describe la propiedad selectedIndex con la propiedad option.
HTML
<!DOCTYPE html>
<head>
<title>
How to get selected value in
dropdown list using JavaScript?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to get selected value in
dropdown list using JavaScript?
</b>
<p> Select one from the given options:
<select id="select1">
<option value="free">Free</option>
<option value="basic">Basic</option>
<option value="premium">Premium</option>
</select>
</p>
<p> The value of the option selected is:
<span class="output"></span>
</p>
<button onclick="getOption()">Check option</button>
<script type="text/javascript">
function getOption() {
selectElement = document.querySelector('#select1');
output = selectElement.options[selectElement.selectedIndex].value;
document.querySelector('.output').textContent = output;
}
</script>
</body>
</html>
Producción:
propiedad de índice seleccionado con propiedad de opción
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA