title: JavaScript Chained Drop Down List that Show/Hide a Div?
body: <p>I'm trying to combine a chained drop down list with the ability for the last selection to show/hide a div. I've researched and found ways to do both individually, but I'm hitting the wall when it comes to combining the javascript (I am admittedly more of a designer). I would appreciate anyone taking the time to help me out with this. </p>
  
  <p>This is how I'd like it to work: User selects from DropDown List 1. DropDown List 2 options appear based on the selection in 1. User selects from DropDown List 2, and appropriate div is shown. </p>
  
  <p>Here's the Javascript I'm using to show/hide a div:</p>
  
  <pre><code>function showDiv(divID)
  {
      var div = document.getElementById(divID);
      div.style.display = ""; //display div
  }
  
  function hideDiv(divID)
  {
      var div = document.getElementById(divID);
      div.style.display = "none"; // hide
  }
  
  function hideAllDivs()
  {
      //Loop through the seclect menu values and hide all
      var courseSelect = document.getElementById("courseSelect");
      for (var i=0; i&lt;=courseSelect.options.length -1; i++)
      {
          hideDiv(courseSelect.options[i].value);
      }
  }
  
  function toggle(showID){
      hideAllDivs(); // Hide all
      showDiv(showID); // Show the one we asked for
  }
  </code></pre>
  
  <p>Here's the Javascript for the chained drop down lists:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" defer&gt;
  function cascadeSelect(parent, child){
      var childOptions = child.find('option:not(.static)');
      child.data('options',childOptions);
  
      parent.change(function(){
          childOptions.remove();
          child
          .append(child.data('options').filter('.sub_' + this.value))
          .change();
      })
  
      childOptions.not('.static, .sub_' + parent.val()).remove();
  
  }
  
  $(function(){
      cascadeForm = $('.cascadeTest');
      deptartmentSelect = cascadeForm.find('.deptartmentSelect');
      courseSelect = cascadeForm.find('.courseSelect');
  
      cascadeSelect(deptartmentSelect, courseSelect);
  });
  </code></pre>
  
  <p>And lastly, my HTML (simplified)</p>
  
  <pre><code>&lt;form action="#" class="cascadeTest"&gt;
  &lt;table&gt;
  &lt;tr&gt;
  &lt;th&gt;Organization:&lt;/th&gt;
      &lt;td&gt;&lt;select name="deptartmentSelect" class="deptartmentSelect"&gt;
          &lt;option value="0"&gt;Select a Department&lt;/option&gt;
          &lt;option value="1"&gt;Dept A&lt;/option&gt;
          &lt;option value="2"&gt;Dept B&lt;/option&gt;
          &lt;option value="3"&gt;Dept C&lt;/option&gt;
        &lt;/select&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Territory:&lt;/th&gt;
      &lt;td&gt;&lt;select name="courseSelect" class="courseSelect" onChange="toggle(this.options[this.options.selectedIndex].value)"&gt;
          &lt;option value="0" class="static"&gt;- Courses -&lt;/option&gt;
          &lt;option value="A1" class="sub_1"&gt;Course A1&lt;/option&gt;
          &lt;option value="B1" class="sub_2"&gt;Course B1&lt;/option&gt;
          &lt;option value="C1" class="sub_3"&gt;Course C1&lt;/option&gt;
        &lt;/select&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  &lt;div id="A1" style="display:none;"&gt;I am Course A1&lt;/div&gt;
  &lt;div id="B1" style="display:none;"&gt;I am Course B1&lt;/div&gt;
  &lt;div id="C1" style="display:none;"&gt;I am Course C1&lt;/div&gt;
  </code></pre>
  
  <p>Thanks again in advance!</p>