How can I organize many results in a selectbox using php?

Question

I have a select box that is part of a form. It is currently querying the addresses table and displaying the addresses into the select box. I plan on having up to 100 addresses.

I'm looking for a solution where I can show all the states if the user clicks on the select box. Then if the user hovers over a state it will show all the addresses for that specific state. Then if the user clicks on an address, it will show that as the picked option in the select box. This is like a dropdown menu within a select box.

Does anyone know where I can find a solution as this?

Answer 1

You didn't specify the server technology, so I am just going to go with a JS solution. What you have to do is not use a <select> element and use something like a drop-down menu.

Take your pick. You will have to customize the solution to suit your need obviously.

EDIT: Each final <a> in your drop down structure would have JavaScript to set a hidden <input> on the page so it can be posted.

EDIT 2: Check out this iPod style drill down menu:

Answer 2

You will need to pre-load all addresses to the client side, then use JavaScript or CSS to perform hover actions, otherwise your user would have to wait for ajax response if you choose to load on hover action. But i don't think that there is a pre-written script that will perform this exact task for you. But right away it sounds like a job for JQuery.

Edition:

Use javascript's onmouseover instead of CSS's :hover. CSS's :hover only works for <a> in IE

Answer 3

There are JavaScript/jQuery/Prototype plugins that convert the select elements on your page into div/ul-li based lists. However, all of the plugins that I've come across display items as a single level list, whereas you're looking for a two level list menu. Inside your select list, you can use option tag for addresses, grouped inside states using the optgroup tag (example here). This gives you the select list organized the way you want. You can then search for a fancy select plugin that works with optgroups inside select.