Guy 5

I have a form where you need to choose a region. At the moment this is in a <select> list where I've nested the options with hyphens. e.g:

- France
- Germany
- Scandinavia
-- Denmark
-- Norway
-- Sweden
- Spain
North America
- Canada
-- Alberta
-- British Columbia
-- Nova Scotia
- United States
-- Arizona
-- California
-- Montana
-- New York

I hope you get the idea.

Anyway, I'd use <optgroup> but all levels need to be selectable, and the optgroup is not.

Is there a better way of presenting this type of data, or resources you can direct me to for best practice html form design.

  • The above example is extremely abbreviated. The actual list would contain most countries in the world, and the regions they are in... Guy about 9 years ago

2 answers

Mottie 1134

I don't know if you are willing to use the jQuery library, but maybe the McDropdown plugin may be what you want. At first I was thinking a chain select box might work, but it causes too much clutter.

Another option, which mimics the ipod is a drill down menu system which is also a nice option.

Answered about 9 years ago by Mottie
  • Thanks for the links. I'm definitely going to check out more on jQuery as it keeps coming up. While I'm not sure if these particular examples will suit what I'm looking for, I appreciate the quick answer! :) Guy about 9 years ago
  • Here is another off the wall idea LOL... present them with a map they can click on to select their region: Mottie about 9 years ago

This may be an opportunity to be more creative. All that you really need is for data to be selectable by the user and passed to your server. If a single <select> doesn't work, then perhaps, you can find a better option. For instance, radio buttons, or perhaps a second <select> similar to the chain select mentioned. Another option is to combine some options so that there is no "United States" option, but instead "United States - Arizona", "United States - California", etc.

jQuery is a great tool to enhance the look and usability of your site, but it is never good by itself. If your site doesn't work without JavaScript, then your site simply doesn't work. I assume that you already use PHP. You can use that to make the site more dynamic. For a good form you'll want a comprehensive strategy that includes clean markup and AJAX as a progressive enhancement.

Answered about 9 years ago by kainosnous
  • Thanks kainosnous. I can't combine the items like you suggest as the parent still has to be selectable. At the moment, chain select is winning, although chain radios could work, or a combination of both. Guy about 9 years ago