Selects anidados utilizando el atributo DATA de HTML5
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-*)
Etiquetas: anidado, atributos data, desplegable, html5, javascript, jquery, select
Error con la función indexOf() al utilizarla con arrays en Internet Explorer
Trabajando con arrays en javascript, una función bastante interesante con la que contamos es con indexOf() para obtener la posición de la primera ocurrencia del valor especificado en un array.
Casualmente, esta función no está disponible para arrays en Internet Explorer 8 y anteriores pero si que está disponible para utilizar con strings.
Con este sencillo “hack” podremos contar con esta función cuando manejemos arrays.
1 2 3 4 5 6 7 8 9 10 | if(!Array.indexOf){ Array.prototype.indexOf = function(obj){ for(var i=0; i<this.length; i++){ if(this[i]==obj){ return i; } } return -1; } } |
