Estoy desarrollando un componente para Communiqué 5 (CQ5, ahora llamado AEM o Adobe Experience Manager) con JSP, HTML y JavaScript, y me encuentro con un problema al intentar crear dos listas desplegables (dropdowns) en la que los valores de una dependan del valor de la otra.
En el diálogo del componente (dialog.xml) tengo dos select
parecidas a éstas (simplificadas para el ejemplo):
...
<tipo
jcr:primaryType="cq:Widget"
defaultValue="claro"
fieldLabel="Tipo de color"
name="./tipo"
type="select"
xtype="selection">
<options jcr:primaryType="cq:WidgetCollection">
<o1
jcr:primaryType="nt:unstructured"
text="Claro"
value="claro"/>
<o2
jcr:primaryType="nt:unstructured"
text="Oscuro"
value="oscuro"/>
</options>
</tipo>
<color
jcr:primaryType="cq:Widget"
defaultValue="azul-claro"
fieldLabel="Color"
name="./color"
type="select"
xtype="selection">
<options jcr:primaryType="cq:WidgetCollection">
<o1
jcr:primaryType="nt:unstructured"
text="Azul Claro"
value="azul-claro"/>
<o2
jcr:primaryType="nt:unstructured"
text="Azul Oscuro"
value="azul-oscuro"/>
<o3
jcr:primaryType="nt:unstructured"
text="Gris Claro"
value="gris-claro"/>
<o4
jcr:primaryType="nt:unstructured"
text="Rojo Claro"
value="rojo-claro"/>
<o5
jcr:primaryType="nt:unstructured"
text="Rojo Oscuro"
value="rojo-oscuro"/>
</options>
</color>
...
Lo que genera dos listas desplegables en el diálogo:
- la primera con el tipo de color (claro u oscuro); y
- la segunda con cinco colores (azul claro, azul oscuro, gris claro, rojo claro, rojo oscuro)
Tal y como se ve en la siguiente imagen:
Ahora, ¿cómo puedo hacer para que los valores de la segunda lista desplegable se actualicen dependiendo del valor de la primera? Por ejemplo, si se selecciona "Claro" como tipo de color, quiero que la segunda sólo tenga azul claro, gris claro y rojo claro; y si se selecciona "Oscuro", quiero que la segunda sólo muestre azul oscuro y rojo oscuro.
Inicialmente pensé en hacerlo con JavaScript, añadiendo un listener del tipo selectionchanged
a la primera lista que mostrar/escondiera las opciones de la segunda lista, pero no encuentro relación entre el campo mostrado y el div
con las opciones (el código generado no es un select
de HTML sino una estructura de CQ5 aparte).
Se me ocurrió también tener dos listas desplegables para la segunda opción: una con colores claros y otra con colores oscuros, y entonces mostar/esconder la que correspondiese. Pero me encuentro con el mismo problema. Pude añadir id
/cls
a las listas para que tuvieran sus propios ids y poder operar con ellas, pero entonces el problema es que tanto la lógica como el mantenimiento se complicarían demasiado (realmente no sería sólo dos listas desplegables, sino 6 ó 7 en mi caso real).
¿Cómo puedo crear esas dos listas desplegables en las que los valores mostrados en la segunda dependan del valor seleccionado en la primera?