Question

在AEM 6.2中，我有第一个下拉列表，它有三个值[x，y，z]，第二个下拉列表有这些值[abc，def，ghk]。我的要求是，当我在第一个下拉列表中选择值[y]时，我想禁用第二个下拉列表并将值设置为[def]。当在第一次下调中选择[y]时，作者不应该能够更改第二个下拉列表的值（它应该默认为[def]）。

Answer 1

免责声明：此解决方案并不完美，我对其进行了测试，并且可以安装AEM 6.2（未安装CFP或SP）。 javascript API可能会随着CFP和SP的变化而变化。但是，下面的解决方案应该是一个很好的基础，通过一些调试，您可以使它适用于您的环境。

网络上似乎没有好的资源，至少不是那些能够正确处理的资源，所以我写了一个解决方案：

我创建了以下组件：

<强> HTML：

<h1> dropdown test placeholder</h1>
<h4>first: ${properties.first}</h4>
<h4>second: ${properties.second}</h4>

<强> CQ：对话框

请注意以下事项：


对话框的根节点有extraClientlibs="[dropdown-author-clientlib]"这是我们的clientlib类别，我们将添加自定义代码

下拉节点有id id="first-dropdown"和id="first-dropdown"，因此我们可以在代码中轻松选择它们

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root
    xmlns:jcr="http://www.jcp.org/jcr/1.0"
    xmlns:cq="http://www.day.com/jcr/cq/1.0"
    xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    xmlns:sling="http://sling.apache.org/jcr/sling/1.0" 
    jcr:primaryType="nt:unstructured" 
    jcr:title="Example Dialog"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[dropdown-author-clientlib]">
    <content jcr:primaryType="nt:unstructured"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">
            <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <first jcr:primaryType="nt:unstructured" fieldLabel="First" id="first-dropdown" name="./first" sling:resourceType="granite/ui/components/foundation/form/select">
                        <items jcr:primaryType="nt:unstructured">
                            <default jcr:primaryType="nt:unstructured" text="(default)" value="" />
                            <x jcr:primaryType="nt:unstructured" text="x" value="x" />
                            <y jcr:primaryType="nt:unstructured" text="y" value="y" />
                            <z jcr:primaryType="nt:unstructured" text="z" value="z" />
                        </items>
                    </first>
                    <second jcr:primaryType="nt:unstructured" fieldLabel="second" id="second-dropdown" name="./second" sling:resourceType="granite/ui/components/foundation/form/select">
                        <items jcr:primaryType="nt:unstructured">
                            <def jcr:primaryType="nt:unstructured" text="def" value="def" />
                            <ghi jcr:primaryType="nt:unstructured" text="ghi" value="ghi" />
                            <abc jcr:primaryType="nt:unstructured" text="abc" value="abc" />
                            <default jcr:primaryType="nt:unstructured" text="(default)" value="" />
                        </items>
                    </second>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

clientlib： 在组件下，我创建了这个clientlib：

类别=＆＃34; [下拉-作者 - clientlib]＆＃34;

我不会创建一个clientlib，它很简单。

在clientlib中，我添加了以下script.js文件：

(function(){
  var $doc = $(document);
  var $first, $second;
  $doc.on('foundation-contentloaded', function(e) { // 'foundation-contentloaded' triggered when dialog is ready
    $dialog = $(e.target); 
    // get "Coral UI 2" select instance reference: https://helpx.adobe.com/experience-manager/6-2/sites/developing/using/reference-materials/coral-ui/components/Coral.Select.html#
    firstSelect = $dialog.find('#first-dropdown').data('select'); // coral ui select instance
    secondSelect = $dialog.find('#second-dropdown').data('select'); // coral ui select instance

    // enables/disables the second select based on value provided
    function toggleSecond(firstVal){
      if(firstVal === 'y'){
        secondSelect._select('def', 'def'); // first is the value, second is the display text
        secondSelect.set('disabled', true)
        // we need to remove 'disabled' attr from the actul select inorder for it to be submitted with form submit
        secondSelect.$element.find('select').removeAttr('disabled');
      }
      else {
        secondSelect.set('disabled', false)
      }
    }

    // run when dialog opens
    toggleSecond(firstSelect.getValue());

    // 'selected' is not in the documentation, change does not work, found this by looking into the js code
    firstSelect.on('selected', function(e){
      toggleSecond(e.selected);
    })
  });
})();

现在，当您在第一个下拉列表中选择y时，第二个将被设置为＆＃39; def＆＃39;和残疾人。

上面的代码应该足够简单，我添加了评论，以便更容易理解。如果您有任何问题，请告诉我。

AEM 6.2 - 根据另一个下拉值的选择在一个下拉列表中设置值

1 个答案: