Ver Mensaje Individual
  #7 (permalink)  
Antiguo 07/09/2014, 21:44
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años, 4 meses
Puntos: 977
Respuesta: ¿Cómo obtener valor de atributo DATA (HTML5)?

Es más simple de lo que crees. Solo debes de asignar el id de cada párrafo al pseudo-atributo de cada opción, aunque sería aún más sencillo si trabajaras con el atributo value. Un ejemplo:

Código HTML:
Ver original
  1. <select onchange = "fn(this.value)">
  2.     <option>Seleccione una opción</option>
  3.     <option value = "manzana">Manzana</option>
  4.     <option value = "pera">Pera</option>
  5.     <option value = "mango">Mango</option>
  6.  
  7. <p id = "manzana">Manzana</p>
  8. <p id = "pera">Pera</p>
  9. <p id = "mango">Mango</p>

Código CSS:
Ver original
  1. p{
  2.     opacity: 0;
  3.     position: absolute;
  4.     transition: .5s;
  5. }

Código Javascript:
Ver original
  1. var parrafos = document.getElementsByTagName("p"),
  2.     total = parrafos.length;
  3.  
  4. function fn(id){
  5.     for (var i = 0; i < total; i++){
  6.         if (parrafos[i].id == id){
  7.             parrafos[i].style.opacity = 1;
  8.         }
  9.         else{
  10.             parrafos[i].style.opacity = 0;
  11.         }
  12.     }
  13. }

Lo que hago es simple. A cada opción del combo, le asigno el id de cada párrafo, desvanezco a estos últimos y en el código JavaScript, tomo a todos los párrafos y, en la función, itero sobre ese conjunto de párrafos. En cada iteración, comparo el valor seleccionado con el id de cada opción; si son iguales, muestro al párrafo, caso contrario, lo oculto. De esta forma, da igual si tienes una, tres o mil opciones, siempre funcionará.

DEMO

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand