Question

我正在使用JSP，HTML和JavaScript为Communiqué5（CQ5，现在的AEM）开发一个组件;当我尝试创建两个下拉列表时，我发现了一些问题，第二个下拉列表的值将取决于第一个值。

在组件对话框（dialog.xml）中，我有两个select类似于这些（为简洁起见而简化）：

...
<type
        jcr:primaryType="cq:Widget"
        defaultValue="Dark"
        fieldLabel="Color Type"
        name="./type"
        type="select"
        xtype="selection">
    <options jcr:primaryType="cq:WidgetCollection">
        <o1
                jcr:primaryType="nt:unstructured"
                text="Dark"
                value="dark"/>
        <o2
                jcr:primaryType="nt:unstructured"
                text="Light"
                value="light"/>
    </options>
</tipo>
<color
        jcr:primaryType="cq:Widget"
        defaultValue="dark-blue"
        fieldLabel="Color"
        name="./color"
        type="select"
        xtype="selection">
    <options jcr:primaryType="cq:WidgetCollection">
        <o1
                jcr:primaryType="nt:unstructured"
                text="Dark Blue"
                value="dark-blue"/>
        <o2
                jcr:primaryType="nt:unstructured"
                text="Light Blue"
                value="light-blue"/>
        <o3
                jcr:primaryType="nt:unstructured"
                text="Dark Green"
                value="dark-green"/>
        <o4
                jcr:primaryType="nt:unstructured"
                text="Light Green"
                value="light-green"/>
        <o5
                jcr:primaryType="nt:unstructured"
                text="Dark Red"
                value="dark-red"/>
    </options>
</color>
...

在对话框中生成两个下拉列表：

第一个颜色类型（黑暗或浅色）;和
第二个有颜色（深蓝色和浅蓝色，深绿色和深红色）

像这样的图像：

dialog box

如何根据第一个下拉列表的颜色（颜色类型）使第二个下拉列表（颜色）的值“更新”？例如，如果颜色类型是“暗”我只想看到深色：深蓝色，深绿色，深红色;同样，如果颜色类型为“浅色”，我只想看到浅色：浅蓝色和浅绿色。

我最初考虑过使用JavaScript执行此操作，在第一个下拉列表中添加selectionChanged侦听器，以显示/隐藏第二个列表中的选项。但我找不到字段和带有选项的div之间的任何关系（生成的代码不是HTML select，而是带有div和隐藏输入的单独CQ5结构

然后我考虑为第二个选项提供不同的下拉列表：一个用浅色，另一个用深色，直接显示/隐藏整个下拉列表而不是一些选项。我可以通过将id / cls分配给选择小部件来做一些事情，但它使后面的逻辑变得复杂并且难以维护（如果我添加新选项，我需要创建新的下拉列表，在我的真实代码中，我有2个以上的选项，但6）。

如何创建下拉列表，其中第二个中的选项取决于第一个中选择的选项？

<子> Cross-post from StackOverflow en Español

Answer 1

您可以尝试以下内容：

为您的颜色选择添加属性“id”，其值为“colorsComp”。

而不是nodes-options使用带有颜色的optionsProvider：

function(path, record) {
    return [{
        text:"Dark Blue",
        value:"dark-blue"
    },{
        text:"Light Blue",
        value:"light-blue"
    },{
        text:"Dark Green",
        value:"dark-green"
    },{
        text:"Light Green",
        value:"light-green"
    },{
        text:"Dark Red",
        value:"dark-red"
    }];
}

然后，对于“颜色类型”小部件，您可以过滤有关类型的选项。事件selectionChanged的回调可能如下所示：

function(comp,value,checked){
    var colorsDropDown = CQ.Ext.getCmp("colorsComp");
    if (!colorsDropDown.original) {
        colorsDropDown.original = colorsDropDown.optionsProvider;
    }

    colorsDropDown.optionsProvider = function(path, record) {
        return colorsDropDown.original().filter(function (el) {
            return el.value.indexOf(value) != -1;
        });
    }

    colorsDropDown.setOptions(colorsDropDown.optionsProvider());
}

我们通过id获取“颜色”小部件，我们设置，然后我们保存我们的原始提供者，设置新的，过滤并更新可用选项。

这是一个有点脏的解决方案，但我希望，它会给你一些见解。

Upd1：您还需要对组件初始化进行类似的操作，以便在窗口小部件首次显示时显示正确的已过滤选项。

Answer 2

除了@Alex提供的解决方案之外，从可维护性和可扩展性的角度来看，我可以想到2个选项。

一个解决方案可以将第二个下拉列表中的选项列表保存为sling osgi config。在组件对话框中，您可以使用所需参数（暗，亮）进行sling servlet调用。然后servlet将解析配置，构造json并渲染第二个下拉。

只是想一想，你可以用这种方式存储配置值 - ＆gt;黑暗=深褐色;光=浅棕色; etc，它将帮助您根据请求参数匹配config中的值。

第二个解决方案： 您还可以通过一个接受键值对颜色的组件来驱动此逻辑。如果您的应用程序中有某种管理页面，作者可以使用某种治理编写颜色列表，然后您的代码可以从该组件中读取并呈现第二个下拉列表。

如何在cq5对话框中创建依赖的下拉列表

2 个答案: