0

我想知道如何使用 javascript在Touch 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 (dropdown) 的对话框属性值。

先感谢您。

4

1 回答 1

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">
于 2017-08-24T17:08:25.990 回答