www.webdeveloper.com
Results 1 to 5 of 5

Thread: Creating Multiple Selection Drop-Downs Based on Previous Selection

  1. #1
    Join Date
    Feb 2014
    Posts
    1

    Creating Multiple Selection Drop-Downs Based on Previous Selection

    So I'm new at html and javascript and I'm trying to create a page where you users have to make multiple selections that are based on each other. How do you create a form such that a specific type of dropdown menu #3 appears based on the user's selection in dropdown menu #2 and specific type of dropdown menu #2 appears based on the user's selection in dropdown menu #1.

    For example, lets say a user has to choose a "product category" and a "product subcategory". If a user chooses "shoes" from the first drop down menu, a second drop-down menu automatically appears with choices like "nike, adidas, puma".

    To further this example, lets say the user chose "computers" instead of "bedding." Then the second-drop down menu would have choices like "sony, dell, apple".

    Following the third-drop down menu would have options based upon the second-drop menu. For example, after selecting apple, the drop-down menu will show "MacBook Air, MacBook Pro, iMac"

    How would one go about doing something like that? Is it something you would do in HTML/CSS or some other form?

    Thanks for the help!

    Note: I have some of the coding for when you have just two drop down menus, but how do you add another drop down menu to have in total 3 drop-down menus.



    Here is the code that I have so far but need more help:

    http://stackoverflow.com/questions/1...her-dropdown-m

  2. #2
    Join Date
    Oct 2013
    Posts
    515
    See one example in my response here:
    http://www.webdeveloper.com/forum/sh...and-Javascript

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Lightbulb

    An alternative solution for 1 to 4 drop-down selections.
    Erase the code that is not necessary for your needs.
    Code:
    <html>
    <head>
    <title> 1- to 4-level Drop Down</title>
    <style type="text/css">
    .DDlist { display:none; }
    </style>
    
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=202456
    // and: http://www.codingforums.com/showthread.php?t=169465
    // Modified for 1 to 4 (+) level drop down selections
    
    var categories = [];
      categories["startList"] = ["Apparel","Books",'Radio','True','False'];        // Level 1  (True|False is 1 level only)
      
        categories["Apparel"] = ["Men","Women"];                         // Level 2
          categories["Men"] = ["Shirts","Ties","Belts"];                    // Level 3
            categories['Shirts'] = ['Tux','Button-down','Polo',"T's"]         //  Level 4
            categories['Ties'] = ['Silk','String','Bow']                      //  Level 4
            categories['Belts'] = ['Leather','Cloth']                         //  Level 4
    
          categories["Women"] = ["Blouses","Skirts","Scarves"];             // Level 3
            categories["Blouses"] = ["Silk","Cotton","Polyester"];             // Level 4 only
            categories["Skirts"] = ["Full","Pleated"];                         // Level 4 only
            categories["Scarves"] = ["Head","Neck","Waist"];                   // Level 4 only
    	  
        categories["Books"] = ["Biography","Fiction","Nonfiction"];      // Level 2
          categories["Biography"] = ["Contemporary","Historical","Other"];  // Level 3 only
          categories["Fiction"] = ["Science","Romance"];                    // Level 3 only
          categories["Nonfiction"] = ["How-To","Travel","Cookbooks"];       // Level 3 only
    
        categories['Radio'] = ['AM','FM','HD'];                          // Level 2 only
    
    var nLists = 4; // number of 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[0]['List'+i].length = 1;
        document.forms[0]['List'+i].selectedIndex = 0;
        document.getElementById('List'+i).style.display = 'none';
      }
      var nCat = categories[currCat];
      if (nCat != undefined) { 
        document.getElementById('List'+step).style.display = 'inline';
        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 getValues() { 
      var str = '';
      str += document.getElementById('List1').value+'\n';
      for (var i=2; i<=nLists; i++) {
        if (document.getElementById('List'+i).selectedIndex != 0) {
          str += document.getElementById('List'+i).value+'\n'; }
      }
      alert(str); 
    }
    
    function init() { fillSelect('startList',document.forms[0]['List1']); }
    
    navigator.appName == "Microsoft Internet Explorer"
       ? attachEvent('onload', init, false) 
    		   : addEventListener('load', init, false);	
    
    </script>
    </head>
    <body>
    <form action="" onsubmit="return false">
    
    <select name='List1' id="List1" onchange="fillSelect(this.value,this.form['List2'])">
    <option selected>Make a selection</option>
    </select> &nbsp;
    
    <select name='List2' id="List2" onchange="fillSelect(this.value,this.form['List3'])" class="DDlist">
    <option selected>Make a selection</option>
    </select> &nbsp;
    
    <select name='List3' id="List3" onchange="fillSelect(this.value,this.form['List4'])" class="DDlist">
    <option selected >Make a selection</option>
    </select> &nbsp;
    
    <select name='List4' id="List4" class="DDlist">
    <option selected >Make a selection</option>
    </select> &nbsp;
    
    <!-- can add more levels if desired as "List5"+ -->
    <button onclick="getValues()">Show selections</button>
    </form>
    </body>
    </html>
    Good Luck!

  4. #4
    Join Date
    Feb 2014
    Posts
    6
    This CSS3 script can handle infinite sub menus (well, I have got up to six layers so far) using a ul and li tagged menu nested in an HTML5 nav tag. I found this looking for CSS3 scripts to eliminate differences in the ways different browsers render HTML and to allow Non-HTML5 compatible browsers to render the new elements correctly. here is the relevant excerpt:
    Code:
    /* START NAV MENU */
    nav 
    {
        height: 30px;
        width: 1093px;
        font-weight: bold;    
        font-size: 18px;       
    } 
     
    nav ul
    { 
        margin:0; 
        padding:0; 
        list-style:none;    
    } 
    
    nav ul li
    { 
        -moz-border-radius: 15px; 
        -webkit-border-radius: 15px; 
        border-radius: 15px;
        margin:0; 
        padding:0; 
        position:relative; 
        height:30px;
        width:135px; 
        line-height:30px;            
    } 
    
    nav > ul > li 
    { 
        float: left; 
        height:30px; 
        line-height:30px;          
    } 
    
    nav li > ul
    { 
        visibility:hidden; 
        width:100px; 
        position: absolute; 
        top:10px; 
        left:115px;
                 
    }
    
    nav li > ul > li
    { 
        width: 185px;
        border: 3px solid black;
        -moz-border-radius: 15px; 
        -webkit-border-radius: 15px; 
        border-radius: 15px;
        box-shadow: 5px 5px 5px #333333;
        -webkitbox-shadow: 5px 5px 5px #333333;
        background-color:#9EBCDE;
    }
    
    nav > ul > li > ul
    { 
        top:25px; 
        left:0;
        float: none;       
    } 
    
    nav li:hover
    { 
        -moz-border-radius: 15px; 
        -webkit-border-radius: 15px; 
        border-radius: 15px;
        background-color:#BCBCFF; 
    } 
    
    nav li:hover > ul
    { 
        visibility:visible;
        float: none;
        z-index: 2;       
    }
    
    nav ul li ul li a 
    {
        text-align:center; 
    }
    There are some style elements in there you can easily adjust for your own uses. I find that this is easier that the CSS3Menu product the is out there, and more customizable. This round some borders, that can be eliminated, just experiment and adjust it to your needs!

  5. #5
    Join Date
    Feb 2014
    Posts
    6
    ul and li tagged menu exampleto be use with the above css. I have it nested in a div that has rounded borders and a border shadow effect (examples of that styling can be found in the above css):
    Code:
    <nav>
    										<ul>
    											<li><a href="Default.aspx">Home</a></li>
    											<li><a href="Services.aspx">Services</a>
    												<ul>													
    													<li><a href="Products/Products.aspx">Products</a>
    														<ul>
    															<li><a href="Products/Keepsakes/Keepsakes.aspx">Keepsakes</a>
    																<ul>
    																	<li><a href="Products/Keepsakes/OnyxTeardrop.aspx">Onyx Teardrop</a></li>
    																	<li><a href="Products/Keepsakes/PearlTeardrop.aspx">Pearl Teardrop</a></li>
    																	<li><a href="Products/Keepsakes/OnyxHeart.aspx">Onyx Heart</a></li>
    																	<li><a href="Products/Keepsakes/PearlHeart.aspx">Pearl Heart</a></li>
    																	<li><a href="Products/Keepsakes/OnyxButterfly.aspx">Onyx Butterfly</a></li>
    																	<li><a href="Products/Keepsakes/PearlButterfly.aspx">Pearl Butterfly</a></li>
    																	<li><a href="Products/Keepsakes/OvalPawprints.aspx">Oval Paw Prints</a></li>
    																	<li><a href="Products/Keepsakes/DogTag.aspx">Dog Tag</a></li>
    																	<li><a href="Products/Keepsakes/SilverCross.aspx">Silver Cross</a></li>
    																	<li><a href="Products/Keepsakes/MemorialPendant.aspx">Memorial Pendant</a></li>
    																	<li><a href="Products/Keepsakes/InlayedPendant.aspx">Inlayed Pendant</a></li>
    																	<li><a href="Products/Keepsakes/Keychain.aspx">Life Print Keychain</a></li>
    																</ul>
    															</li>
    															<li><a href="Products/Urns/Urns.aspx">Pet Urns</a>
    																<ul>																	
    																	<li><a href="Products/Urns/VaseUrns.aspx">Vase Urns</a>
    																		<ul>
    																			<li><a href="Products/Urns/PotteryUrns.aspx">Pottery Vase Urns</a></li>
    																			<li><a href="Products/Urns/PawPrintVaseUrn.aspx">Paw Prints Urn</a></li>
    																			<li><a href="Products/Urns/SlateSinglePawUrns.aspx">Single Paw Urns</a></li>
    																			<li><a href="Products/Urns/PetPawUrns.aspx">Pet Paw Collection</a></li>
    																			<li><a href="Products/Urns/MarbleVaseUrns.aspx">Marble Vase Urns</a></li>
    																			<li><a href="Products/Urns/ClassicGoldUrns.aspx">Classic Gold Urns</a></li>
    																			<li><a href="Products/Urns/ClassicPewterUrns.aspx">Classic Pewter Urns</a></li>
    																			<li><a href="Products/Urns/MausEarthUrns.aspx">Maus Earth Urns</a></li>
    																			<li><a href="Products/Urns/MausGraniteUrns.aspx">Maus Granite Urns</a></li>
    																		</ul>
    																	</li>
    																	<li><a href="Products/Urns/PhotoUrns.aspx">Photo Urns</a>
    																		<ul>																			
    																			<li><a href="Products/Urns/K9CottageUrns.aspx">K9 Cottage Urns</a></li>
    																			<li><a href="Products/Urns/DigitalUrns.aspx">Digital Photo Urns</a></li>
    																			<li><a href="Products/Urns/BasicPhotoUrn.aspx">Basic Photo Urns</a></li>
    																			<li><a href="Products/Urns/HorzFramePhotoUrns.aspx">Wide Photo Urns</a></li>
    																			<li><a href="Products/Urns/VertFramePhotoUrns.aspx">Tall Photo Urns</a></li>
    																			<li><a href="Products/Urns/TowerUrns.aspx">Tower Photo Urns</a></li>
    																		</ul>
    																	</li>
    																	<li><a href="Products/Urns/HardwoodUrns.aspx">Hardwood Urns</a>
    																		<ul>
    																			<li><a href="Products/Urns/TraditionalUrns.aspx">Traditional Urns</a></li>
    																			<li><a href="Products/Urns/BasicPhotoUrn.aspx">Basic Photo Urns</a></li>
    																			<li><a href="Products/Urns/HorzFramePhotoUrns.aspx">Wide Photo Urns</a></li>
    																			<li><a href="Products/Urns/VertFramePhotoUrns.aspx">Tall Photo Urns</a></li>
    																			<li><a href="Products/Urns/TowerUrns.aspx">Tower Photo Urns</a></li>
    																		</ul>
    																	</li>																	
    																	<li><a href="Products/Urns/ContemporaryUrns.aspx">Contemporary Urns</a>
    																		<ul>
    																			<li><a href="Products/Urns/RockUrns.aspx">Rock Urns</a></li>																			
    																		</ul>
    																	</li>
    																	<li><a href="Products/Urns/FigurineUrns.aspx">Figurine Urns</a></li>
    																</ul>
    															</li>															
    															<li><a href="Products/Caskets/Caskets.aspx">Pet Caskets</a></li>															
    															<li><a href="Products/Memorials/Memorials.aspx">Memorial Markers</a></li>
    															<li><a href="Products/Additional/Additional.aspx">Additional Items</a></li>
    														</ul>
    													</li>
    													<li><a href="Cremations/Cremations.aspx">Cremations</a>
    														<ul>													
    															<li><a href="Cremations/ClassicPackage.aspx">Classic Package</a></li>
    															<li><a href="Cremations/DevotionPackage.aspx">Devotion Package</a></li>
    															<li><a href="Cremations/PawsPackage.aspx">Paws Package</a></li>
    															<li><a href="Cremations/TempPackage.aspx">Temporary Package</a></li>
    															<li><a href="Cremations/TributePackage.aspx">Tribute Package</a></li>
    															<li><a href="Cremations/CustomPackage.aspx">Custom Package</a></li>
    														</ul>
    													</li>
    												</ul>
    											</li>
    											<li><a href="Resources.aspx">Resources</a></li>
    											<li><a href="Testimonials.aspx">Testomonials</a></li>
    											<li><a href="Faq.aspx">FAQ</a></li>
    											<li><a href="Condolences.aspx">Condolences</a></li>
    											<li><a href="About.aspx">About</a>
    												<ul>
    													<li><a href="Staff.aspx">Our Staff</a></li>
    													<li><a href="Location.aspx">Our Location</a></li>													
    												</ul>
    											</li>
    											<li><a href="Contact.aspx">Contact</a></li>
    										</ul>
    									</nav>

Thread Information

Users Browsing this Thread

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

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
  •  
HTML5 Development Center



Recent Articles