I was recently given the task of updating a web application that presents very large multiple choice selectLists to the user (over 100 choices in each list – I’m not kidding!).
Not wanting to present the user with such a large selectList (Admittedly, large selectLists are a personal dislike of mine), I searched for a solution that would simplify the entire selection process for the user and stumbled apon Uzilla’s Multi-Select DHTML Widgit system.
While a great idea and a nice piece of scripting, I didn’t want to have to change the current application code at all and so wrote an unobtrusive JavaScript that dynamically creates the multi-select widgit from an existing selectList.
The benefits behind the method are well explained within Uzilla’s original article so I won’t reiterate it all here.
Initiating the Multi-Select widgit
Just add the className “fd-multi-select” to each selectList you wish the script to convert.
Creating the selection groups
Each selectList should be constructed using optGroup and option tags.
Each optGroup defined within the selectList will create a separate selection group and each selection group will contain one radio button or checkbox for each option within the optGroup.
Each selection group created uses the value of the optGroup’s label attribute as it’s title. Each checkBox or radioButton created uses the value of the corresponding option to create the appropriate label text (trust me, this will make much more sense after you have viewed the demo source code).
Ignoring single options
Should the original selectList contain an option that is not part of any optGroup, this option will be ignored by the script i.e. no checkBox or radioButton will be created for the option in question.
This was done to enable each selectList to contain a descriptive first/default option of the sort “Please choose…” (a very common practice for HTML selectLists), that would not be taken into consideration by the script.
Multiple or Single selection
Should the original selectList be defined as enabling multiple selections (by the addition of multiple="multiple"), the script will create one checkBox for each option encountered, otherwise, the script creates one radioButton for each option encountered. This enables the script to exactly replicate the single/multiple choice functionality defined for the original selectList.
Auto collapse
Should the original selectList’s className contain “fd-auto-collapse”, the script will only allow one select group to be open at a time (N.B: Auto collapse is forced for selectLists defined without the multiple="multiple" attribute).
Adding square brackets to the checkbox names
It’s a common practice in PHP to append square brackets to HTML checkbox names (in order to have PHP create an array of the checked values within it’s predefined $_POST and $_GET variables). To enable the script to play fair with PHP and create checkbox names of this type, just add the className “fd-add-square-brackets” to the selectList.
Tested in Firefox, Mozilla, Internet Explorer 6 and Opera 8.5
View the Unobtrusive Alternative SelectList Widgit demo or download the javascript source
Previous Comments ~
“Each selectList should be constructed using optGroup and option tags.”
But I don’t use optGroup, just a long list of option (actually, 18,000+ options).
Is it possible to make every option a link to another page?
@ Bruce: 18000+ options! Bruce, being totally honest, there isn’t a JavaScript in the world that would help a user navigate that many options. Can you not class the options in some way and let the user first select from a list of available classments before presenting them with only the relevent options?
From a useability standpoint, that many options at once is a bit of a navigational nightmare…
As for turning each option into a link to a new page, it would require a (rather large) change to the script (first to ignore the optGroups and second to create a link and not a checkbox). Feel free to alter the code to do this.
Regards,
Brian.
18000 options? That’s unbelievable! (unbelievably bad ;)
Thanks, this select list widget is great, just what I’ve been looking for. Excellent work!
Implementing it was quite simple, even for a js newbie like myself. I even modified it slightly to create more meaningful labels.
Unfortunately though, I’m having a problem both pre-selecting and retrieving values from the radio buttons or check boxes in IE6. It works perfect in FF so I’m not sure what the problem would be.
For pre-selecting, my server-side script is marking them with selected=’selected’ as it should be. I can see that with js off the selections are made on the original select box. The selections are not carrying over to the new dynamic radio/check boxes though for IE6.
Retrieving values does not seem to work properly in IE6 as well. Perhaps the dynamic inputs are not being submitted.
If you have any ideas they would be greatly appreciated!
You can check out the address I’ve posted with my comment if you’d like. You can try saving changes too. Everything is good in FF just not IE :(
Thanks again!
Me again ;)
After banging my head on the wall for a number of hours, I’ve managed to solve my problem! Thought I’d post it here should others find themselves in the same position.
First thing I did was make a few changes to the for loop (~line 75) that loops through the options in each optgroup. I declared an empty variable and then assigned it a string ( checked=’checked’ ) if the original option was selected.
Then I added that variable into the input tag created during the IE hackery. After this I was able to see the radio button being posting with the form finally.
Posting the form though the values for the radio button was always blank.
I discovered adding a value attribute to the original options in the select list solved that and everything now works perfectly!
If possible could you please remove the url from my comments?
Thanks again for this script! I will surely attach a link on the site if I actually complete it. It’s just for fun right now!
@ Mike: Hi Mike, thanks for the tips (bug fixes). I’ll try to roll them into the code this week. I was of the opinion that option's require a value attribute but apparently not (I've just checked the spec and they are optional).
Again, thanks for the info, glad you liked the script.
Update: I've changed the code to check for an options "value" attribute, if none exists, it then uses the options text value. I've also got Internet Explorer to "check" the dynamically created checkbox by using the little known "defaultChecked" property. I've also cleaned up the code somewhat... a fresh download is advised.
Brian.
Comments are currently closed for this article but feel free to email me with your input - I’d love to hear it.