SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: menu swappinig

  1. #1
    SitePoint Guru
    Join Date
    Jan 2005
    Location
    USA
    Posts
    633
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink menu swappinig

    Hi All

    I wish you all a happy 2005.Please could someone help me,

    I am new to javascript but I am getting the hang of it.

    What I want is a few drop down lists but at the beginning only one is displayed, let say a list of cars and when Ford is chosen then another drop down list shows with the year then lets say 2000 is chosen then another
    drop dow list shows with models and lets say when 2.0 litre is chosen then we
    get another drop down list for color...etc etc etc.

    I think visibility and hidden comes into play here, I think but not to sure.

    I think this is called menu swapping,I have seen a few on the net but I
    am unable to really understand the source,

    Please could someone assist.

    Thanks
    Didi

  2. #2
    Tranceoholic lilleman's Avatar
    Join Date
    Feb 2004
    Location
    Írebro, Sweden
    Posts
    2,716
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    One way to solve it is to generate the list dynamically. Here is an example:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title>Javascript: Fill list based on selection in another list</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <script type="text/javascript">
       var menuItems = new Object();
       
       menuItems['se'] = [['Google', 'google.com'], ['Altavista', 'altavista.com']];
       menuItems['sites'] = [['SitePoint', 'sitepoint.com'], ['Apache', 'httpd.apache.org']];
       
       function populateList( listId, menuId )
       {
         var selectList = document.getElementById(listId);
         selectList.options.length = 0;
         
         if( menuItems[menuId] )
         {
           for( var c = 0; c < menuItems[menuId].length; c++ )
             selectList.options[c] = new Option( menuItems[menuId][c][0], menuItems[menuId][c][1] );
         }
       }
      </script>
     </head>
     
     <body onload="populateList('items', 'se')">
      <select id="types" onchange="populateList('items', this.value)">
       <option value="se">Search Engines</option>
       <option value="sites">Websites</option>
      </select>
      <select id="items"></select>
     </body>
    </html>
    You can see it in action here.

    Yours, Erik.
    ERIK RIKLUND :: Yes, I've been gone quite a while.

  3. #3
    SitePoint Guru
    Join Date
    Jan 2005
    Location
    USA
    Posts
    633
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Erik

    Thanks for the reply, I think I am almost there with your help but I need something like the one here.If you go down to the vehicle
    details section, you will see what I mean.

    Please help
    Didi


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
  •