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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    San Antonio, TX
    Posts
    131
    Thanks
    1
    Thanked 0 Times in 0 Posts

    add dropdown menus to a dropdown menu format

    This is going to be hard to explain, so please bear with me here...
    I have no idea about how to do what I want to do, but maybe someone can help me with the code or direct me where to go to get the code...
    I have a page, that has a series of dropdown menus (5). However, I am only wanting to show 3 at first. What I am looking for is a way to have the 4th and 5th dropdown menus to pop into view, or just appear after the last entry of the 3rd dropdown menu is entered. Basically, what I would like to happen is this...

    User fills in the first three dropdown choices, and after filling out the last option of the 3rd dropdown, the user clicks the 'Enter' or the 'tab' key on their keyboard, a 4th dropdown menu will appear underneath the 3rd one, showing all 4 dropdown menus...and after the 4th dropdown is filled, and the user clicks on the 'Enter' or 'tab' key on their keyboard, a 5th dropdown menu will appear underneath the 4th one. showing all 5 dropdown menus.
    Eventually I will be adding more than 5 dropdowns, but for now, 5 is all I need.

    Can anyone help me with this?

    I have put a sample page on a friends server so you can see what I have so far...
    http://www.tweedscott.com/ImperialSpider.html
    The code is too long to post here.

    Thanks in Advance for any assistance,

    Imperial Spider.
    Last edited by ImperialSpider; 03-26-2005 at 06:17 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>

    <
    script language="JavaScript" type="text/javascript">
    <!--

    var 
    CngAry=new Array();

    function 
    CkCng(obj){
     
    Add=1;
     for (
    i=0;i<CngAry.length;i++){
      if (
    CngAry[i]==obj){
       
    Add=0;
      }
     }
     if (
    Add){
      
    CngAry[CngAry.length]=obj;
     }
     if (
    CngAry.length>2){
      
    document.getElementById('fred3').style.visibility='visible';;
     }
     if (
    CngAry.length>3){
      
    document.getElementById('fred4').style.visibility='visible';;
     }
    }

    //-->
    </script>

    </head>

    <body>
    <select name="fred0" size="1" onchange="javascript:CkCng(this);" >
    <option>Select 0</option>
    <option>fred0 1</option>
    <option>fred0 2</option>
    </select>
    <br>
    <select name="fred1" size="1" onchange="javascript:CkCng(this);" >
    <option>Select 1</option>
    <option>fred1 1</option>
    <option>fred1 2</option>
    </select>
    <br>
    <select name="fred2" size="1" onchange="javascript:CkCng(this);" >
    <option>Select 2</option>
    <option>fred2 1</option>
    <option>fred2 2</option>
    </select>
    <br>
    <select name="fred3" id="fred3" size="1" onchange="javascript:CkCng(this);" style="position:relative;visibility:hidden;" >
    <option>Select 3</option>
    <option>fred3 1</option>
    <option>fred3 2</option>
    </select>
    <br>
    <select name="fred4" id="fred4" size="1" style="position:relative;visibility:hidden;" >
    <option>Select 4</option>
    <option>fred4 1</option>
    <option>fred4 2</option>
    </select>
    <br>
    </body>

    </html> 
    lots of other ways to do this


  •  

    Posting Permissions

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