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
    May 2011
    Location
    new york
    Posts
    118
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Right direction for how to make dropdowns that appear as a user selects choices

    in the style of

    http://www2.gibson.com/Support/Dealers.aspx

    In this example, it looks like they have logic that pulls the locations from a database, which makes it slow. I have my options already populated on the client side...

    Currently I show 4 drop downs, but I'd rather show them 1 initally, and then as they select items, another appears, then another appears, then another appears. etc

    Can someone point me in the right direction for how to pull this off, or perhaps what this technique is called or even some examples/demos online?


    Thank you so much! <3

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    All you need to do is place each select list in a <div> which is initially styled ="display:none" but changes to "block" or "inline" when a selection has been made from the previous list.

    Code:
    <select id = "list1" onchange = "showNext('L2')">
    <option value = 0>Choose ...></option>
    <option value = 1>One</option>
    <option value = 2>Two</option>
    <option value = 3>Three</option>
    </select>
    
    <div id = "L2"  style="display:none">
    <select id = "list2" onchange = "showNext('L3')">
    <option value = 0>Choose ...></option>
    <option value = 1>One</option>
    <option value = 2>Two</option>
    <option value = 3>Three</option>
    </select>
    </div>
    
    <div id = "L3"  style="display:none">
    <select id = "list3" onchange = "showNext('L4')">
    <option value = 0>Choose ...></option>
    <option value = 1>One</option>
    <option value = 2>Two</option>
    <option value = 3>Three</option>
    </select>
    </div>
    
    <div id = "L4"  style="display:none">
    <select id = "list4">
    <option value = 0>Choose ...></option>
    <option value = 1>One</option>
    <option value = 2>Two</option>
    <option value = 3>Three</option>
    </select>
    </div>
    
    
    <script type = "text/javascript">
    function showNext(which) {
    document.getElementById(which).style.display="inline";
    }
    </script>
    If desired it is not hard to hide the select lists again if a previous one has been reset to "Choose..."


    Quizmaster: CO2 is the chemical symbol for which gas?
    Contestant: Petrol
    Last edited by Philip M; 12-24-2012 at 09:10 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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