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-*)

CompartirTweet about this on TwitterShare on TumblrShare on FacebookShare on LinkedInShare on Google+Email this to someone

Tags ; , , , , , ,

2 comentarios

    the_master_of_web Sep 07, 2012

    Cambia esto
    var seleccionado = $(this).find(‘option:selected’);

    Por esto
    var seleccionado = $(this).val();

    Responder
    David Sep 12, 2014

    Hola,
    estoy utilizando esto para filtrar por categorías trabajos en un portfolio. Me encuentro con que no puedo asignar dos categorías a un mismo trabajo.

    Alguna solución?

    Gracias!!!

    Responder

Escribe un comentario

Los comentarios son moderados y se utiliza rel="nofollow" para los enlaces.