How can I add descriptions to the options in an HTML select box?

Question

I'm looking for suggestions of possible ways to handle this user interface question.

I have a form with a select box drop down where a user is selecting a named location from a LONG list of company locations. Some of the options in this list have similar, or potentially identical names, but correspond to locations with different addresses.

For example, there might be options:

ABC Company
ABC Company 2nd Floor
BEF INC
BEF INC West
...

What I'd like to do is somehow give the user more info about the select option, either in the select box itself, or maybe as a hover-over tooltip.

Ideally, I'd like the select options to appear as:

ABC Company
 abc company 100 east ave ny ny 10231
ABC Company 2nd Floor
 abc company 100 east ave suite 600 ny ny 10231
BEF INC
 bef inc 500 main st boston ma 12345
BEG INC WEST
 beg inc 900 north lane san francisco ca 90121
...

Has anyone solved this problem already with other solution, or have any recommendations on plugins that would help achieve this specific result?

Answer 1

You should definitively took a look at Select 2 (the particular case of Loading Remote Data). It can generate a drop down like that :

And you will also save time for you customer since you can load elements like autocomplete.