Collapsable Drop Down List Box in HTML

Question

Is there any sort of free control which does what the Occupation field does on http://monster.ca? That is allow for grouping of the options in a drop down box with expandable sections? I just learned about the optgroup tag which is close to what I want, but not quite.

Answer 1

It is just a mock up of a drop down control.
The down arrow is an image, all the remainder is made of divs, the drop down list itself being a big div with overflow containing lot of controls with JavaScript to manage all of this (like collapsing sections).

So you can do that yourself, with a bit of work, and lot of help from a good JavaScript framework...

Answer 2

You can't do this with a traditional <select> control, and I doubt there are ready-made components that fit the bill. If you do want to make this yourself, and don't want to buy into a toolkit like extjs or dojo (which would probably make it easiest to build this), I can recommend the following tree library, as it is very simple to use and BSD licensed: http://www.silverstripe.com/tree-control/

Answer 3

Basically what the developers at Monster.ca are doing, is emulating a select-control using a div-element with scrollable content.

Take a look at the "overflow" CSS-property.

Answer 4

Try this, not sure if the interface is any good for your purposes:

http://flooble.com/scripts/hier.php

Answer 5

Hey, have you ever found the solution? If so, I would greatly appreciate if you share the answer with me.

Thanks! Isabelle