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

Question

在 AEM 6.2 中，我的第一个下拉菜单具有三个值 [x、y、z]，第二个下拉菜单具有这些值 [abc、def、ghk]。我的要求是，当我 select 第一个下拉列表中的值 [y] 时，我想禁用第二个下拉列表并将值设置为 [def]。当 [y] 在第一个下拉列表中 selected 时，作者应该无法更改第二个下拉列表的值（它应该默认为 [def]）。

Answer 1

Disclaimer: This solution is not meant to be perfect, I tested it and it works on a vanilla installation of AEM 6.2 (no CFP or SP installed). The javascript API's may change with CFP's and SP's. However, the solution below should serve as a good foundation and with a bit of debugging you can make it work with your environment.

网上好像没有什么好的资源，at-least不是你要求的，所以我写了一个解决方案：

我创建了以下组件：

HTML:

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

cq:对话

Please note the following:

The root node of the dialog has extraClientlibs="[dropdown-author-clientlib]" this is our clientlib category where we will add the custom code

The dropdown nodes have id's id="first-dropdown" and id="first-dropdown" so we can easily select them in our code

<?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:

类别="[dropdown-author-clientlib]"

I wont get into creating a clientlib, it's simple enough.

在 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);
    })
  });
})();

现在，当您在第一个下拉列表中 select y 时，第二个将被设置为 'def' 并被禁用。

The code above should be simple enough to follow, I added comments to make it even easier to follow. Let me know if you have any questions.

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

AEM 6.2 - Set value in one dropdown based on selection of another dropdown value

aem