如何根据多项选择字段切换 div 的视图答案

【问题标题】：How to toggle view of divs based on multiple-choice select field如何根据多项选择字段切换 div 的视图
【发布时间】：2018-11-07 20:06:29
【问题描述】：

有点初学者的问题。我正在尝试为 Drupal 内容发布页面应用 javascript，如果用户从多项选择下拉菜单中选择 X，则显示 div 1,2 和 4。如果他们选择 Y 和 Z，则显示这些相关字段.

我已经有了一个基于单一选择的基本工作脚本（即使有点丑陋和初学者）。但我有一个多项选择下拉菜单。

我想这是通过将选定的选项放入一个数组并对其进行检查来完成的。但这有点超出我的技能，我似乎无法为我的场景找到一个好的例子：

哎呀，我什至无法通过显示一系列选项的警报，更不用说根据需要更改代码了。我看到使用“$(this).val();”的建议...但我只是在控制台中收到一个错误：“$ 不是函数。”假设我做对了，我已经尝试过 jQuery 语法和 javascript 语法。我很确定我的 Drupal 模块知道接受 jQuery，如果这是问题的话。

（作为旁注，我确信还有一种更简单/更短的方法可以使用类或自定义属性来切换 div。但是，对于所有不同的 ID 和场景，这些方法似乎并没有更短.)

作为 Javascript 的新手，我希望我已经解释得很好。这是我制作并想要更改的脚本：

if(window.attachEvent) {
    window.attachEvent('onload', whenLoaded);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            whenLoaded(evt);
        };
            window.onload = newonload;
    } else {
        window.onload = whenLoaded;
    }
}

function whenLoaded() {

  document.getElementById('edit-field-resource-type').addEventListener('change', function () {
  alert(this.value); // test to show worked.
       // alert($(this).val()); // tried for multiple choices - didn't work: 
       // "$ is not a function" .. I tried this way too: $(this).value;
       // var choices_array = [];

    var showWebinars = this.value == "taxonomy_term-14" ? 'block' : 'none';
    var showCaseStudies = this.value == "taxonomy_term-12" ? 'block' : 'none';
    var showWhitePapers = this.value == "taxonomy_term-11" ? 'block' : 'none';
    var showVideos = this.value == "taxonomy_term-13" ? 'block' : 'none';
    var showPodcasts = this.value == "taxonomy_term-62" ? 'block' : 'none';
    var showOther = this.value == "taxonomy_term-16" ? 'block' : 'none';
    var showInfographics = this.value == "taxonomy_term-10" ? 'block' : 'none';

document.getElementById('edit-post-webinar-copy-wrapper').style.display = showWebinars;
document.getElementById('edit-field-event-duration-wrapper').style.display = showWebinars;

document.getElementById('edit-field-infographic-file-wrapper').style.display = showInfographics;

document.getElementById('edit-field-video-embed-wrapper').style.display = showVideos;
document.getElementById('edit-field-video-third-party-wrapper').style.display = 

document.getElementById('edit-field-audio-file-wrapper').style.display = showPodcasts;
document.getElementById('edit-field-audio-file-link-wrapper').style.display = showPodcasts;

document.getElementById('edit-field-resource-file-wrapper').style.display = showWhitePapers;
document.getElementById('edit-field-resource-file-wrapper').style.display = showWhitePapers;

document.getElementById('edit-field-infographic-file-wrapper').style.display = showInfographics;


   });

}

【问题讨论】：

如果你想使用 jQuery 语法，你需要使用类似<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>的东西来要求 jQuery
是的，我认为 Drupal 有一个不相关的问题，不包括以编程方式。现在，我将坚持使用 javascript 本身
我想我已经取得了一些进展，使用 Javascript（不是 jQuery）循环遍历选择并将结果（如果选择）添加到数组“selectedArray”中...现在，我要确定的是如何修改它下面的三元组 var x = this.value == term-in-array selectedArray ？ 'block' : 'none' ...除非有更好的方法来解决这个问题？
对于 DOM 操作（这是你想要做的），我真的推荐使用 jQuery，因为它相对轻量级，你会避免很多小错误和跨浏览器的问题兼容性...我有一个想法，我会尽快发布。

标签： arrays select show-hide

【解决方案1】：

使用 jQuery，类似的东西应该适合你（注意# 字符将通过它们的id 选择元素，. 字符将通过它们的class 选择元素。

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#edit-field-resource-type').change(function(){
                var v = $(this).val();
                $('.all-options').hide(); //hide all the divs first, then only show the ones you want to show
                if(v==='something-1'){
                    $('.something-1').show();
                }
                else if(v==='something-2'){
                    $('.something-2').show();
                }
                // and so on...
            });
        });
    </script>
</head>

【讨论】：

如果我的理解是正确的，这是单选题吗？我需要考虑选择列表中的多个选项。也许是循环数组的 jQuery 版本，就像我在丑陋的 js 解决方案中发布的那样？ ...编辑：哦等等..我看到了 .val();那里。没关系

【解决方案2】：

我将继续探索提到的 jQuery 选项，但需要调查 Drupal CMS 的其他问题，即不允许 jQuery 工作，即使它已添加到 YML 中。

与此同时，这是一个对我有用的修改后的脚本。又丑又长，但它奏效了。我欢迎任何关于如何在我的限制范围内简化或更好地做到这一点的反馈

document.getElementById('edit-field-resource-type').addEventListener('change', function () {

         function loopSelected() {

             var selectedArray = new Array();

             var selObj = document.getElementById('edit-field-resource-type');
             var i;
             var count = 0;
             for (i=0; i<selObj.options.length; i++) {
               if (selObj.options[i].selected) {
                 selectedArray[count] = selObj.options[i].value;
                 count++;
               }
             }


             var showWebinars = selectedArray.includes("taxonomy_term-14") ? 'block' : 'none';
             var showCaseStudies = selectedArray.includes("taxonomy_term-12") ? 'block' : 'none';
             var showWhitePapers = selectedArray.includes("taxonomy_term-11") ? 'block' : 'none';
             var showVideos = selectedArray.includes("taxonomy_term-13") ? 'block' : 'none';
             var showPodcasts = selectedArray.includes("taxonomy_term-62") ? 'block' : 'none';
             var showOther = selectedArray.includes("taxonomy_term-16") ? 'block' : 'none';
             var showInfographics = selectedArray.includes("taxonomy_term-10") ? 'block' : 'none';

             alert(showWebinars);

             document.getElementById('edit-post-webinar-copy-wrapper').style.display = showWebinars;
             document.getElementById('edit-field-event-duration-wrapper').style.display = showWebinars;
             document.getElementById('edit-field-byline-wrapper').style.display = showWebinars;

             document.getElementById('edit-post-webinar-copy-wrapper').style.display = showWebinars;
             document.getElementById('edit-field-event-duration-wrapper').style.display = showWebinars;
             document.getElementById('edit-field-byline-wrapper').style.display = showWebinars;
             document.getElementById('edit-post-webinar-copy-wrapper').style.display = showWebinars;
             document.getElementById('edit-field-event-date-range-wrapper').style.display = showWebinars;

             document.getElementById('edit-field-infographic-file-wrapper').style.display = showInfographics;

             document.getElementById('edit-field-video-embed-wrapper').style.display = showVideos;
             document.getElementById('edit-field-video-third-party-wrapper').style.display = showVideos;
             document.getElementById('edit-field-video-type-wrapper').style.display = showVideos;

             document.getElementById('edit-field-audio-file-wrapper').style.display = showPodcasts;
             document.getElementById('edit-field-audio-file-link-wrapper').style.display = showPodcasts;


           }

        loopSelected();

    });

    }

【讨论】：

【解决方案3】：

如果您以正常方式创建内容类型，只需使用“条件字段”模块。

您无需编写此功能。

【讨论】：

实际上-该模块是我这样做的原因。我首先尝试了条件字段。我遇到了几个问题，因为它似乎没有完全烘焙并且在 Alpha（对于 D8）中 - 或者它与我的 Drupal 安装中的某些内容发生冲突。另外，Drupal org 网站上有一个安全咨询警告，而且这个网站是针对一家安全公司的，所以我不能冒险