Custom select boxes with JavaScript [Work-in-progress]
It’s sunday and I’ve been looking for something reasonable to do while not actually working. So I though I’d address an issue we’ll be having at 23 within the next month or so. We want to let people choose their language from a drop-down select box, and we want each option in this box to have a flag icon representing the language. Such specific styling isn’t doable through plain HTML, so custom code is needed…
(We’re certainly not the first to address this issue, and a lot of people have begun to include custom select boxes in their web applications. Most notable in this crowd is Google in Google Reader and Gmail.)
I’m still a few hours from a result that’s usable in the real life, but the first prototype demonstrates where I’m going. Already the JavaScript and the accompanying stylesheet is well-commented, but since it seems like a great example of advanced web scripting in action I’ll be back with a detailed walk-through soon.
January 16th, 2008 at 6:21 pm
Nice start, but the main usability aspect of select boxes is the ability to jump to items using the keypad.
google, create a text box on click and can filter the list based on this.
January 16th, 2008 at 6:37 pm
Yeah, you’re probably right — so you’d go for basics specs like this:
- Autogenerate the javascript select box from a <select><option value=”…”>…</option></select> to make sure that old browsers degenerate nicely.
- Inherit events such as onchange and onclick from the html select as well.
- Inherit class names from ’select’ and ‘option’s for styling purposes.
- Act exactly like a standard form element by insert a hidden form element with the selected value.
- Have two different options: One allows you to jump in the option list when clicking the keypad, and another one creates the google-like text box for filtering.
- All parts of the js select box must be styleable with run-of-the-mill css.
Anything further to add?
January 25th, 2008 at 1:42 am
hey. that’s quite a list.
i’m not sure what you mean by the inherit the events from the select box, there has to be a way to attach onClick, onChange events etc.. you method sounds an interesting (and right) approach… I’ve always been creating an addEvent method but this now sounds stupid way to go if there can be done through inheritence of the selects events….
I think the filter approach is best, less bloat to go single way. Ofcourse theres also the up/down cursor…
I look forward to seeing yr implementation.. or lets discuss further
January 13th, 2009 at 7:39 am
Its really good but one issue on it. wen u click on outside of that select box the does not close, will you plz fix this issue..
January 13th, 2009 at 7:40 am
Its really good but one issue on it. wen u click on outside of that select box the box(which has showing the value) does not closed, will you plz fix this issue..