Selects anidados utilizando el atributo DATA de HTML5

mayo 16, 2012

Vamos a hacer uso del atributo DATA de HTML5 para crear dos selects anidados. En algunas ocasiones necesitamos saber que tipo de dato hemos seleccionado en el primer desplegable en lugar del valor en sí. Podría darse el caso de un primer select con razas de animales y el segundo (que cambiará según lo que hemos seleccionado en el primero) con comida para diferentes tipos de animal.

Creo que es más claro con un ejemplo:

1
2
3
4
5
6

<select id="animales">
  <option value="1" data-type="perro">Caniche</option>
  <option value="2" data-type="gato">Siamés</option>
  <option value="3" data-type="gato">Persa</option>
  <option value="3" data-type="perro">Pastor alemán</option>
</select>

En el segundo despegable mostraremos los diferentes tipos de comida según si hemos seleccionado un perro o un gato. En este caso nos da igual la raza, solo queremos saber que tipo de animal es.

Como se puede ver, he añadido el atributo data-type a cada option del select con el tipo de animal que es. Este valor personalizado lo podemos obtener fácilmente con jQuery tal que así:

1
2
3
4
5
6
7
8

$(function(){
    $('animales').change(function(){
       var seleccionado = $(this).find('option:selected');
       // 'type' es lo que va a continuación del guión en data-type
       var animal = seleccionado.data('type');
       ...
    });
});

También podemos acceder a este valor con Javascript básico:

1
2
3

var animales = document.getElementById('animales');
var seleccionado = animales.options[animales.selectedIndex];
var animal = seleccionado.getAttribute('data-type');

Ahora ya podremos generar el segundo desplegable con los diferentes tipos de comida según el tipo de animal que hemos seleccionado.

Más información sobre los atributos DATA de HTML5: HTML5 Custom Data Attributes (data-*)