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

[phpchick]

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

[Philip M]

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.

<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