En el trabajo nos encontramos con un problema interesante: tenemos una página con una lista desplegable que, cuando cambia la opción seleccionada, actualiza los valores de una seria de elementos a partir de los valores de una variable en JSON.
El HTML es algo como esto (simplificado):
<select id="paises">
<option value="chile">Chile</option>
<option value="colombia">Colombia</option>
<option value="ecuador">Ecuador</option>
</select>
<div id="valores">
Pais: <span id="pais"></span><br/>
Teléfono: <span id="telefono"></span><br/>
Email: <span id="email"></span>
</div>
Y el JSON es algo parecido a esto (simplificado):
info = {
"chile": {
"nombre": "Chile",
"telefono": "123456789",
"email": "[email protected]"
},
"colombia": {
"nombre": "Colombia",
"telefono": "192837465",
"email": "[email protected]"
},
"ecuador": {
"nombre": "Ecuador",
"telefono": "987654321",
"email": "[email protected]"
}
}
El código JavaScript no es relevante para la pregunta, pero la idea es sencilla: dependiendo del país seleccionado, se actualizarán los span
. Por ejemplo, si se selecciona Chile, el span
con id "pais" contendrá "Chile", el span
con id "telefono" mostrará "123456789", etc, etc.
Ahora esa página se ha movido a un nuevo CMS y, por diferentes motivos, estamos limitados en los componentes que podemos usar y ninguno de ellos permite incorporar JavaScript (ni siquiera inline), sólo nos deja introducir HTML y CSS.
Entonces la pregunta sería: ¿cómo se puede simular el comportamiento descrito arriba, pero exclusivamente usando HTML+CSS sin ningún tipo de JavaScript o JSON?
En cuanto a HTML y CSS no tenemos limitaciones: podemos reordenar/organizar los elementos como queramos, podemos añadir elementos nuevos/eliminar elementos ya existentes, podemos añadir tanto código como queramos... mientras que no contenga ningún script, sólo HTML y CSS.
Por ejemplo, nosotros finalmente encontramos una solución (la compartiré en las respuestas abajo por si a alguien le sirve de inspiración) sustituyendo el select
por una lista ul
, transformando el JSON a CSS (con :before
y content
) y con una serie de input
s escondidos... pero el problema es que ocupa demasiado espacio y queremos saber si habría otro método diferente.
data-•
.