Los datos de un control select múltiple

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

En esta ocasión vamos a revelar un sencillo truco para obtener los datos de un control de tipo select, cuando admite múltiples opciones (cuando tiene el atributo multiple).

Como sabes, tú puedes incluir en tu formulario un selector de opciones que le permita al usuario escoger varias de ellas. Lo importante es que debemos ser capaces de recoger, en un script de destino, todas las respuestas elegidas por el usuario.

Un ejemplo del tipo de selector del que hablamos sería el siguiente:

Vaaaale. Se nota que me gusta el “alpiste” 😉 .  Bromas aparte, si el usuario selecciona más de una opción, y envía el formulario, intentamos recuperar, en el script de destino (es PHP, pero podría ser cualquier otro lenguaje), las opciones elegidas, así:

$bebidas = $_POST["bebidas"];

Y ya tenemos el problema. Sólo nos aparece la última opción de las seleccionadas. Por ejemplo, si el usuario ha seleccionado las opciones con los valores 1, 5 y 6, en la variable $bebidas sólo aparece el valor 6. Los otros se han perdido.

La solución a esto es tan simple que resulta paradójico que muchos desarrolladores, incluso con años de oficio, no la conozcan, pero esta entrada está porque me han llegado preguntas en este sentido, a través de distintos canales. Simplemente ponemos, en el valor del atributo name del selector unos corchetes. Sustituimos la línea

<select name="bebidas" multiple>

por la siguiente:

<select name="bebidas[]" multiple>

Y ya está. Tan simple como eso. Ahora, cuando hagamos el envío y recuperemos este campo como hemos hecho antes, la variable $bebidas contiene una matriz con todas las opciones seleccionadas. En el ejemplo anterior, el valor de esta variable sería ["1","5","6"]. Que los datos, aunque sean dígitos, aparezcan como de tipo string es irrelevante, dado que PHP no es tipado y, además, por la propia naturaleza del uso de estos selectores, seguramente tampoco vayamos a hacer cálculos con ellos, si no que, probablemente, irán destinados a una consulta SQL o similar. Además, teniendo ya la matriz con los datos, siempre podemos convertirlos a numéricos, si nos hiciera falta. Lo importante era recuperar todas las opciones seleccionadas, y ya lo hemos logrado, de la forma más fácil y rápida posible.

Agregar atributos a las etiquetas HTML 5

Cuando desarrollamos la parte front-end de una aplicación web, a menudo nos encontramos con que tenemos que poder referenciar distintos elementos HTML, como pueda ser un imagen, un bloque, un párrafo, etc. Necesitamos referenciarlos para gestionarlos desde CSS o desde JavaScript. En la mayoría de las ocasiones, nos basta con usar propiedades como el id, o un nombre específico de clase que le apliquemos al elemento. Sin embargo, hay ocasiones con las que eso no es suficiente, y necesitamos atributos no normalizados. En los días oscuros (y, por suerte, ya lejanos) de HTML 4, añadir esos atributos era un dolor de cabeza, empleando instrucciones JavaScript que ni siquiera eran aceptadas por la mayoría de los navegadores. Afortunadamente, el estándar HTML 5 hace que esto sea fácil de hacer y, lo que es más importante, de utilizar.