¿Cómo obtener valor de atributo DATA (HTML5)?

[Alexis88]

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:

<select onchange = "fn(this.value)">
    <option>Seleccione una opción</option>
    <option value = "manzana">Manzana</option>
    <option value = "pera">Pera</option>
    <option value = "mango">Mango</option>
</select>
 
<p id = "manzana">Manzana</p>
<p id = "pera">Pera</p>
<p id = "mango">Mango</p>
 

Código CSS:

p{
    opacity: 0;
    position: absolute;
    transition: .5s;
}
 

Código Javascript:

var parrafos = document.getElementsByTagName("p"),
    total = parrafos.length;
 
function fn(id){
    for (var i = 0; i < total; i++){
        if (parrafos[i].id == id){
            parrafos[i].style.opacity = 1;
        }
        else{
            parrafos[i].style.opacity = 0;
        }
    }
}
 

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