Linked drop down lists and load div

Question

I'm kind of new when it comes to programming but am trying to learn. What I need to do for my site is have 2 or 3 linked drop-down menus so when I select an item from the first one, the second one will refresh with other options. I have found a way to do this using Java but I cannot seem to make it with the refresh div part. I looked up prototypejs/updater but it is a bit over my head and cannot seem to link it with the JavaScript I used for the drop-down menus...

So if anyone can tell how I can link two, maybe 3 drop-down menus and after if I click an option from the last menu make a div from the page refresh with other content please help :)

Answer 1

Try a search on google for dynamic select boxes, it's plenty of examples, choose the less complicated one that best fits with your knowledge.

The principle is to link a function to "onchange" event that the select box fires when an item is selected.

Assuming this select box:

<select id="select1" name="option">
</select>

the javascript fragment is:

var sel1 = document.getElementById("select1");
sel1.onchange = function() {
  //do whatever you want
};

For the first and the second select, the function will load other select's options, while in the third case it will show your div