title: How to toggle view of divs based on multiple-choice select field
body: <p>A bit of a beginner question. I'm trying to apply a javascript for a Drupal content-posting page where, if a user selects X from a multiple-choice dropdown menu, then show divs 1,2 and 4. If they choose Y and Z, show those related fields. </p>
  
  <p>I've already got a basic working script (even if a little ugly and beginer-ish), based off single choices. But I have a multiple-choice select dropdown. </p>
  
  <p>I imagine it's done by putting selected choices in an array and checking against that. But this is a little beyond my skills, and I can't seem to find a good example for my scenario:</p>
  
  <p>Heck, I can't even get past just showing an alert with the array of choices, let alone changing the code as I need. I see suggestions to use "$(this).val();" ... but I just get an error in console: "$ is not a function." I've tried jQuery syntax and javascript syntax, assuming I did it right. I'm pretty sure my Drupal module knows to accept jQuery, if that's the issue.</p>
  
  <p>(as a side note, I'm sure there's a simpler/shorter way to toggle the divs using a class or custom attribute, too. But, with all the different IDs and scenarios, these methods didn't seem any shorter.)</p>
  
  <p>As a novice in Javascript, I hope I've explained well. Here's the script I've made and want to change: </p>
  
  <pre><code>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;
  
  
     });
  
  }
  </code></pre>