DEMO:
Two-level chained select box (Arie Molendijk, http://www.mesdomaines.nu/music)
In the head: this script
Opening body tag: <body onload="hide_it('select','select');hide_it('button','select')">
In the 'main' box something like:
<select id="first_select" onchange="javascript_in_selectbox('first_select'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
<option selected>Select an item</option>
<option disabled>This is the main selectbox</option>
<option value="hide_it('select','select');document.getElementById('button').style.display='inline'; document.getElementById('second_select').style.display='inline'">Webmaster Resources</option>
<option value="hide_it('select','select'); document.getElementById('button').style.display='inline'; document.getElementById('third_select').style.display='inline'">News Sites</option>
<option value="hide_it('select','select'); document.getElementById('button').style.display='inline'; document.getElementById('fourth_select').style.display='inline'">Regular Cars</option>
<option value="hide_it('select','select'); document.getElementById('button').style.display='inline'; document.getElementById('fifth_select').style.display='inline'">Sports Cars</option>
</select>
In the first sub box (= second box) something like:
<select class="select" id="second_select" onchange="javascript_in_selectbox('second_select'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
<option selected>Selected: Webmaster Resources</option>
<option disabled>'Click-to-go' on an item below</option>
<option value="open_it('http://www.dynamicdrive.com')">DynamicDrive</option>
<option value="open_it('http://www.codingforums.com')">CodingForums</option>
<option value="open_it('http://www.w3schools.com')">W3Schools</option>
</select>
In the second sub box (= third box) something like:
<select class="select" id="third_select" onchange="javascript_in_selectbox('third_select'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
<option selected>Selected: News Sites</option>
<option disabled>'Click-to-go' on an item below</option>
<option value="open_it('http://edition.cnn.com')">CNN</option>
<option value="open_it('http://www.bbc.co.uk/news')">BBC News</option>
<option value="open_it('http://www.foxnews.com')">Fox News</option>
</select>
In the third sub box (= fourth box) something like:
<select class="select" id="fourth_select" onchange="javascript_in_selectbox('fourth_select'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
<option selected>Selected: Regular Cars</option>
<option disabled>'Click-to-go' on an item below</option>
<option value="open_it('http://www.toyota.co.uk')">Toyota</option>
<option value="open_it('http://www.ford.co.uk')">Ford</option>
<option value="open_it('http://www.nissan.co.uk')">Nissan</option>
</select>
In the fourth sub box (= fifth box) something like:
<select class="select" id="fifth_select" onchange="javascript_in_selectbox('fifth_select'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
<option selected>Selected: Sports Cars</option>
<option disabled>'Click-to-go' on an item below</option>
<option value="open_it('http://www.porsche.com/uk')">Porsche</option>
<option value="open_it('http://www.astonmartin.com')">Aston Martin</option>
</select>
etc.
Don't forget the reset button:
<button class='select' id="button" onclick="hide_it('select','select');hide_it('button','select')">Reset</button>
You can easily elaborate / customize this yourself.