Show/Hide Div with JavaScript based on Select from Triple Dropdown
<p>Gang - 
This is my first time posting.  I'm a JavaScript noob - I think I've figured out what direction to take - just not sure how to get there.  </p>

<p>I have a triple drop down select menu.  I want the third(final) selection to reveal a hidden div.  Am I on the right track by thinking I need to use a combination of <code>onchange</code>, <code>getElementById</code> and <code>if</code> statements?</p>

<p>The javascript code for the dropdown is Philip M's Cut &amp; Paste Triple Combo box from JavaScriptKit.com.  That work's beautifully.  I won't insert my exact code as the category list is significantly longer.</p>

<pre><code>var categories = [];
categories["startList"] = ["Wearing Apparel","Books"]
categories["Wearing Apparel"] = ["Men","Women","Children"];
categories["Books"] = ["Biography","Fiction","Nonfiction"];
categories["Men"] = ["Shirts","Ties","Belts","Hats"];
categories["Women"] = ["Blouses","Skirts","Scarves", "Hats"];
categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"];
categories["Biography"] = ["Contemporay","Historical","Other"];
categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"];
categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];

var nLists = 3; // number of select lists in the set

function fillSelect(currCat,currList){
  var step = Number(currList.name.replace(/\D/g,""));
  for (i=step; i&lt;nLists+1; i++) {
    document.forms['tripleplay']['List'+i].length = 1;
    document.forms['tripleplay']['List'+i].selectedIndex = 0;
  }
  var nCat = categories[currCat];
  for (each in nCat) {
    var nOption = document.createElement('option'); 
    var nData = document.createTextNode(nCat[each]); 
    nOption.setAttribute('value',nCat[each]); 
    nOption.appendChild(nData); 
    currList.appendChild(nOption); 
  } 
}

function getValue(L3, L2, L1) {
  alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
}

function init() {
  fillSelect('startList',document.forms['tripleplay']['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false); 

&lt;/script&gt;
</code></pre>

<p>My HTML is:</p>

<pre><code>&lt;div id="menuSearch"&gt;
 &lt;form name="tripleplay" action=""&gt;
  &lt;p&gt;&lt;select name='List1' onchange="fillSelect(this.value,this.form['List2'])"&gt;
   &lt;option selected&gt;-- Topic of Interest --&lt;/option&gt;
  &lt;/select&gt;&lt;/p&gt;

  &lt;p&gt;&lt;select name='List2' onchange="fillSelect(this.value,this.form['List3'])"&gt;
   &lt;option selected&gt;-- Geographic Area --&lt;/option&gt;
  &lt;/select&gt;&lt;/p&gt;
  &lt;select id="info"name='List3' onchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)"&gt;
   &lt;option selected &gt;-- Information Type --&lt;/option&gt;
  &lt;/select&gt;
 &lt;/form&gt;
&lt;/div&gt;
</code></pre>

<p>the divs to show/hide are:</p>

<pre><code>&lt;div id="modelingCV"&gt;list of publications&lt;/div&gt;
&lt;div id="groundwaterCV"&gt;list of publications&lt;/div&gt;
&lt;div id="subsidenceCV"&gt;list of publications&lt;/div&gt;
&lt;div id="managementCV"&gt;list of publications&lt;/div&gt;
&lt;div id="qualityCV"&gt;list of publications&lt;/div&gt;
&lt;div id="wildlifeCV"&gt;list of publications&lt;/div&gt;
</code></pre>

<p>Is replacing the <code>getValue</code> in the <code>onchange</code> in the final form select with <code>getElementByID</code> the best approach?  And replace the <code>getValue</code> in the javascript function with some type of <code>if</code> statement to specify the values? I am guessing I need to hide the divs with javascript vs CSS?  Am I completely off base all around?</p>

<p>Oy.  Definitely bit off more than I can chew on this one.  Any guidance would be appreciated. Thanks for reading!</p>
