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<select onchange = "fn(this.value)">
<p id = "manzana">Manzana
</p> <p id = "mango">Mango
</p>
Código CSS:
Ver originalp{
opacity: 0;
position: absolute;
transition: .5s;
}
Código Javascript
:
Ver originalvar 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