AEM 6.2-基于选择另一个下拉列表值在一个下拉列表中设置值

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

免责声明：此解决方案并不完美，我对其进行了测试，并在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>

客户端库： 在该组件下，我创建了以下clientlib：

categories=“[dropdown author clientlib]”

我不会去创建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

时，第二个下拉列表将设置为“def”并禁用

上面的代码应该足够简单，我添加了注释，使其更容易理解。如果你有任何问题，请告诉我

---

有人能分享一些指点吗？这是触摸还是经典？您将不得不编写自定义JS来启用此功能，并且有一些在线资源可以帮助您。你能指出任何能帮助实现这一目标的直接资源吗？这对我不起作用。当我将警报放入clientlib时，我变得“未定义”。警报（'firstSelect…'+firstSelect）-firstSelect……未定义2）警报（'secondSelect…'+secondSelect）--secondSelect…未定义，dialog发出此警报（'dialog…'+$dialog）--dialog…[object object object]因此我将其制作成GeometricXX的组件。如果您有示例geometrics outdoors项目，您可以在geometrixx outdoors页面中安装和测试它，但AEM对话框中的字段宽度已减小。我的意思是早期的大小很大，但现在字段的大小已经减小了。对话框仍然很大，但字段的大小正在缩小。当我删除scrip.js时，对话框字段显示良好。似乎这与您的环境有关，在我的环境中，它工作良好，宽度没有减少。我刚刚注意到它对我有效，因为我已将类别名称设置为“cq.authoring.dialog”。但当我更改类别名称以匹配您的“dropdown author client lib”时，当我选择第一个下拉值时，第二个下拉列表中会设置正确的值。但第二个下拉列表并没有被禁用。这是唯一剩下的问题，就像第二个下拉菜单没有被禁用一样。有什么建议吗？

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