Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Triple Combo - Show/Hide Div

    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.

    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<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); 
    
    </script>
    My HTML is:

    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>
      </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:

    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. Thanks for reading!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,081
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Your divs should look like this:-

    Code:
    <div id = "mydiv" style="display:none">Content of Div</div>
    and then in the script:-

    Code:
    function getValue(L3, L2, L1) {
    alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
    document.getElementById("mydiv").style.display="block"
    }
    The exact div to reveal can be determined from the value of L3 (and perhaps L2 if there are two categories the same in the final selection, e.g. "Hats"). Example:-

    Code:
    function getValue(L3, L2, L1) {
    alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);  // this line is only for testing
    // set all of the divs to style.display="none"; to clear any previous selection
    document.getElementById("mydiv").style.display="none";  
    if (L3 == "Old Churches") {
    document.getElementById("mydiv").style.display="block";  // and show the appropriate div
    }
    }

    The road to happiness is not getting what you want, but wanting what you get. - Philip M
    Last edited by Philip M; 12-17-2010 at 07:14 PM.

  • Users who have thanked Philip M for this post:

    geekGurl71 (12-17-2010)

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Philip -

    thank you, Thank You, THANK YOU! All is working perfectly now. You are my hero!

    Cheers and Happy Holidays!


  •  

    Tags for this Thread

    Posting Permissions

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