Show/Hide Div with JavaScript based on Select from Triple Dropdown

JavaScript
1

Hi, 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.

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 onchange, getElementById and if statements?

The javascript code for the dropdown is Philip M’s Cut & 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.


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<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:- \
" + L1 + "\
" + L2 + "\
" + L3);
}

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

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

</script>

My HTML is:

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

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

the divs to show/hide are:

<div id="modelingCV">list of publications</div>
<div id="groundwaterCV">list of publications</div>
<div id="subsidenceCV">list of publications</div>
<div id="managementCV">list of publications</div>
<div id="qualityCV">list of publications</div>
<div id="wildlifeCV">list of publications</div>

Is replacing the getValue in the onchange in the final form select with getElementByID the best approach? And replace the getValue in the javascript function with some type of if 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?

Oy. Definitely bit off more than I can chew on this one. I now realize jQuery might have been a better option, but I’d be thankful for any guidance in completing this with JavaScript. Thanks for reading!

2

Hi, Gang -

This has been resolved.

Thanks for reading!