Comment passer de la vue divs sur la base champ de sélection à choix multiples

voix
0

Un peu d'une question débutant. Je suis en train d'appliquer un javascript pour une page d'affichage de contenu Drupal où, si un utilisateur sélectionne X à partir d'un menu déroulant à choix multiple, puis montrer divs 1,2 et 4. S'ils choisissent Y et Z, montrer les domaines connexes .

J'ai déjà un script de travail de base (même si un peu laid et débutante-ish), basée au large des choix individuels. Mais j'ai un select choix multiple menu déroulant.

J'imagine qu'il est fait en mettant des choix sélectionnés dans un tableau et le contrôle contre cela. Mais cela est un peu au-delà de mes compétences, et je ne peux pas sembler trouver un bon exemple pour mon scénario:

Zut, je ne peux même pas passé juste montrer une alerte avec l'éventail des choix, et encore moins de changer le code comme je l'ai besoin. Je vois des suggestions à utiliser $ (this) .val (); ... mais je reçois une erreur dans la console: « $ n'est pas une fonction. » J'ai essayé la syntaxe jQuery et javascript syntaxe, en supposant que je l'ai fait droit. Je suis sûr que mon module Drupal sait accepter jQuery, si c'est la question.

(Comme une note de côté, je suis sûr qu'il ya une plus simple / plus court chemin pour passer les divs en utilisant un attribut de classe ou de la coutume, aussi. Mais, avec tous les différents identifiants et scénarios, ces méthodes ne semblent tout court.)

En tant que novice en Javascript, je l'espère, je l'ai bien expliqué. Voici le script que je l'ai fait et je souhaite changer:

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;


   });

}
Créé 07/11/2018 à 20:06
source utilisateur
Dans d'autres langues...                            


3 réponses

voix
0

Si vous avez créé le type de contenu de manière normale il suffit d'utiliser le module « Champs conditionnel ».

Vous n'avez pas besoin de coder cette fonctionnalité.

Créé 09/11/2018 à 15:47
source utilisateur

voix
0

Je vais continuer à explorer la possibilité jQuery mentionné, mais qui ont besoin d'étudier d'autres questions avec le CMS Drupal, ne permettant pas de travailler jQuery, même si elle est ajouté dans le YML.

En attendant, voici un script modifié qui a fonctionné pour moi. Laid et long, mais cela a fonctionné. Je me réjouis des commentaires sur la façon de rationaliser ou mieux le faire dans mes limites

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

    });

    }
Créé 07/11/2018 à 21:33
source utilisateur

voix
0

En utilisant jQuery, quelque chose de semblable à cela devrait fonctionner pour vous (notez que le #caractère choisira des éléments par leur idet le .caractère choisira des éléments par leur 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>
Créé 07/11/2018 à 21:26
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more