Update#2: the third demo allows for preselect states and unlimited levels by using a nested UL and radiobuttons enjoy.

Update: the second demo now allows for preselect states and shows the first dropdown enjoy.

The interface element of connected select boxes (one select box changing the options in the other one) is one of the most used and also most annoying elements of web application design. While it works nicely for anyone having JavaScript enabled and using a mouse it can be a nightmare to use with a keyboard (unless you know that you can expand the whole list with alt+cursor down first).

The other problem is that you make yourself dependent on JavaScript with them and I don’t even want to know what the implementations for screen readers are.

That said, it simply does not die out, people love it. The scary thing is that there are dozens of JavaScript solutions to the problem and almost all of them make you dependent on JavaScript. I’ve tried in the past to come up with solutions for it using for example nested HTML lists in this Alistapart article. What scares me most is that the demo code for a bad solution seems to have ended up on several “Script Library” sites and I get emails coming in thanking me for the great solution!

My personal favourite is keeping the functionality independent of a mouse and JavaScript and using Ajax to populate the second drop down as explained in my book, but that is too complex for a lot of owners of web interfaces.

So today, once again the request for connected select boxes reared its ugly head and my esteemed colleague Bradley Wright took it onto himself to solve the issue (working with this guy does rock – believe me). His approach was to create a massive dropdown with all the information and then use JavaScript to chunk it up. Originally he tried class names on the different options to connect them until he asked me to take a peek and I liked the idea but advocated for optgroups instead (the lesser known select child element).

So, the markup for the non-JavaScript version is the following:

Foo1
Foo1_1
Foo1_2
Foo1_3
Foo1_4
Foo1_5
Foo1_6


Foo2
Foo2_1
Foo2_2
Foo2_3
Foo2_4
Foo2_5
Foo2_6


Foo3
Foo3_1
Foo3_2
Foo3_3
Foo3_4
Foo3_5
Foo3_6


Foo4
Foo4_1
Foo4_2
Foo4_3
Foo4_4
Foo4_5
Foo4_6

All we need now to turn this into connected select boxes is the folllowing:

• Create a new select element
• Loop through all optgroups and create a new select box for each and hide them
• Loop through the options collection of each optgroup
• Take the first option and add it to the new main select element
• Move the other options to the select box connected with this optgroup
• Apply an onchange handler that reads the selectedIndex value of the main select element and shows the select box with the same number, hiding the previous one
• Apply the correct secondary name to the currently shown select box
• Remove the original select box
• Apply the name and ID of the original to the new main select box

Another option is of course to store the data in an object and re-populate the secondary select box every time the first is changed. However, I wanted to avoid that to speed things up.

Check out the example of this technique and tell me what you think.

[tags]Javascript,select boxes,usability,DHTML,domscripting,optgroup,connected select boxes [/tags]

Finally we are doing the last reviews for the new book by Norm and me published by Friends of Ed called “Web Development Solutions – Ajax, APIs and Hosted Services Made Easy”. It has been quite a task to get this one out, with the first technical reviewer never showing up and Norm having to stop his contributions halfway through. However, I can’t wait to see this on the shelves of Foyle’s :-)

Just found this gem by Gareth Dart on the WebAim mailing list:

There seems to be a belief common to designers of captchas that, as soon as their form goes live, a small red LED will start flashing at the board meeting of the World Evil Hacker Organisation. Shady figures will exchange nods and evil cackles, temporarily cease their endless stroking of long haired white cats whilst they direct their minions to do their worst, and then the combined resources of the world hacking community will be targeted solely upon the objective of cracking their form. If they have not made that image as hard to read as is humanly possible, then earthquakes will strike in Japan, lightning will flash down from the sky and ignite the world’s rainforests, aliens will invade and Bob the website boss will be mildly peeved about all the spamming.

On the second day of the Yahoo! internal Frontend Engineering summit in Sunnyvale I’ve been talking about the interplay of CSS and JavaScript. You can download the CSS vs. JS presentation in PDF format – 865KB.

Here is the presentation teaser:

One of the big discussion topics right now is where CSS ends and JavaScript begins. “CSS only” menus advertise themselves as being more accessible and cleaner than JavaScript solutions whereas a lot of pure JavaScript solutions are hard to style. This short course introduces you to ways of how CSS can benefit from JS and vice versa. It’s not a battle – it is a matter of mutualism.

[tags]CSS,JavaScript,behaviour,f2esummit07,presentation[/tags]

Today I gave a talk at the Yahoo! internal Front End Engineering Summit in the Sunnyvale office. You can download the presentation in PDF format and get the workshop files and my solution for the task representing the best practices talked about in the presentation.

The conference is pretty amazing and it is a lot of fun to see the amount of skill accumulated in the company you work for. Tomorrow I’ll be talking about the differences between CSS and JavaScript and how to make them work together.

[tags]presentation,talk,javascript,best practices,maintainability,f2summit07[/tags]