javascript - 在 Javascript 中获取作者 [AEM] 选择的对话框属性值

Question

我想知道如何使用 JavaScript 从触摸 UI 对话框中作者的给定下拉列表中获取所选值以进行进一步操作。

下面是我的对话框结构

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/tabs"
            type="nav"/>
        <items jcr:primaryType="nt:unstructured">
            <General
                jcr:primaryType="nt:unstructured"
                jcr:title="General Questions"
                sling:resourceType="granite/ui/components/foundation/container">
                <layout
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                <items jcr:primaryType="nt:unstructured">
                    <columns
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <allowed-selections
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/select"
                                fieldLabel="Allowed Selections"
                                name="./allowed">
                                <items jcr:primaryType="nt:unstructured">
                                    <one
                                        jcr:primaryType="nt:unstructured"
                                        text="One"
                                        value="one"/>
                                    <two
                                        jcr:primaryType="nt:unstructured"
                                        text="Two"
                                        value="two"/>
                                    <three
                                        jcr:primaryType="nt:unstructured"
                                        text="Three"
                                        value="three"/>
                                    <four
                                        jcr:primaryType="nt:unstructured"
                                        text="Four"
                                        value="four"/>
                                </items>
                            </allowed-selections>
                            <description/>
                            <selection-text
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/textfield"                               
                                fieldLabel="Selection Text"
                                name="./selectiontext"/>
                        </items>
                    </columns>
                </items>
            </General>
        </items>
    </content>
</jcr:root>

在这里，我想在我的 Javascript 中获取 ./allowed(下拉菜单)的对话框属性值。

提前谢谢您。

Answer 1

AEM 有一个 OOTB 库来实现隐藏/显示功能。如果您看到etc文件夹中我们有以下文件

/libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js

根据类名选择器捕获 Foundationcontentloaded、changed 和 selected 事件，并检索目标元素选择值

查看示例片段

$(document).on("selected", ".dropdownselect", function(e) {
    //iterate over e and get element select value
});

$(element).data("select").getValue();

添加 js 顶部给定的类、数据属性和选择器，然后您可以使用选定的监听器获取选定的下拉值并执行自定义逻辑

在对话框中添加类 dropdownselect，然后您可以捕获更改事件的值

<allowed-selections
 jcr:primaryType="nt:unstructured"sl
sling:resourceType="granite/ui/components/foundation/form/select"
 fieldLabel="Allowed Selections"
 name="./allowed"
class = "dropdownselect">