Linked drop down lists and load div

Question

Hello ! 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

Not 100% sure what you are after - but I think this should get you at least some of the way:

http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/

Its a jquery plugin for linking select boxes together, using ajax to load the data to populate the next box in the chain based on the value selected in the previous.

You'll then still need to link the last box with the div - but you should be able to do it with a similar method yourself - see the jquery ajax documentation.

http://docs.jquery.com/Ajax

Answer 2

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