Saltar la navegación

2.4.- Objeto select.

Semáforo con tres opciones a elegir.
geralt (Pixabay License)

Uno de los controles más complejos que te puedes encontrar en formularios, es el objeto select. Un objeto select está compuesto realmente de un array de objetos option. El objeto select se suele mostrar como una lista desplegable en la que seleccionas una de las opciones, aunque también tienes la opción de selecciones múltiples, según definas el objeto en tu documento. Vamos a ver cómo gestionar una lista que permita solamente selecciones sencillas.

Algunas propiedades pertenecen al objeto select al completo, mientras que otras, por ejemplo, sólo se pueden aplicar a las opciones individuales dentro de ese objeto. Si lo que quieres hacer es detectar la opción seleccionada por el usuario, y quieres usar JavaScript, tendrás que utilizar propiedades tanto de select, como de option.

La propiedad más importante del objeto select es la propiedad selectedIndex, a la que puedes acceder de las siguientes formas:

objetoFormulario.nombreCampoSelect.selectedIndex;
document.getElementById("objetoSelect").selectedIndex;

El valor devuelto por esta propiedad, es el índice de la opción actualmente seleccionada, y por supuesto recordarte que los índices comienzan en la posición 0. Siempre que queramos acceder a la opción actualmente seleccionada, recuerda que tendrás que usar esta propiedad.

Las opciones tienen dos propiedades accesibles que son text y value, y que te permitirán acceder al texto visible en la selección y a su valor interno para esa opción (ejemplo: <option value="OU">Ourense</option>). Veamos las formas de acceso a esas propiedades:

objetoFormulario.nombreCampoSelect.options[n].text;
objetoFormulario.nombreCampoSelect.options[n].value;

o también usando document.getElementById("objetoSelect").options[n].text ó .value

<!DOCTYPE  html>
<html>
    <head>
        <meta  http-equiv="content-type"  content="text/html;charset=utf-8">
        <title>DWEC05 - Trabajando con un objeto Select</title>
        <script  type="text/javascript">
            const consultar = () => {
                let provincias = document.getElementById("provincias");
                let texto = provincias.options[provincias.selectedIndex].text;
                let valor = provincias.options[provincias.selectedIndex].value;
                alert(`Datos de la opción seleccionada:\n\nTexto: ${texto}\nValor: ${valor}`);
            }
        </script>
    </head>
    <body>
        <h1>Trabajando con un objeto Select</h1>
        <form id="formulario">
            <p>
                <label for="provincias">Seleccione provincia: </label>
                <select name="provincias" id="provincias">
                    <option value="AL">Almería</option>
                    <option value="JA">Jaen</option>
                    <option value="GR">Granada</option>
                    <option value="MA">Málaga</option>
                    <option value="SE">Sevilla</option>
                    <option value="CO">Córdoba</option>
                    <option value="CA">Cádiz</option>
                    <option value="HU">Huelva</option>
                </select>
            </p>
            <p>
                Selecciona una opción y pulsa el botón.
            </p>
            <input type="button" name="boton" value="Consultar información de la opción" onclick="consultar()"/>
        </form>
    </body>
</html>

Cuando hablamos de un índice en un array, nos estamos refiriendo a la posición de ese array.