Results 1 to 2 of 2

Thread: [RESOLVED] Show/Hide Div with JavaScript based on Select from Triple Dropdown

  1. #1
    Join Date
    Dec 2010
    San Diego, CA

    resolved [RESOLVED] Show/Hide Div with JavaScript based on Select from Triple Dropdown

    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]); 
    function getValue(L3, L2, L1) {
      alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
    function init() {
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false); 
    My HTML is:

    HTML Code:
    <div id="menuSearch">
     <form name="tripleplay" action="">
      <p><select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
       <option selected>-- Topic of Interest --</option>
      <p><select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
       <option selected>-- Geographic Area --</option>
      <select id="info"name='List3' onchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)">
       <option selected >-- Information Type --</option>
    the divs to show/hide are:

    HTML Code:
    <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. Any guidance would be appreciated. I now realize jQuery probably might have been an easier approach, but I would be incredibly thankful for any suggestions for completing this in JavaScript. Thanks for reading!

  2. #2
    Join Date
    Dec 2010
    San Diego, CA
    Hi, Gang -

    This has been resolved. Thanks for reading!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center