SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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>
      </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:
    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. 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. #2
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, Gang -

    This has been resolved.

    Thanks for reading!


Bookmarks

Posting Permissions

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