Nearly every web application produced these days customises, often heavily, the browser’s built in user interface elements. From custom button styles, to auto completing text inputs.
The HTML <select> with its many nested <options> is commonly customised. Plugins allow option groups, text searching, and more. For one of our projects we needed to be able to use ‘nested’ selects – groups of options that only display if a certain ‘parent’ choice is selected. A good example for this would be location. There may be 100 options, but instead of displaying them all, the containing areas are first asked, and the boroughs within the selection then shown.
There’s a number of plugins out there providing this ability, but they all seemed to lack one thing – graceful degradation. We needed the application to fully function without JavaScript and for JavaScript to simply enhance the experience when available. Because of this requirement I decided to build my own plugin from the ground up.
jQuery Dependent Selects turns a single select element (with options grouped through a very simple syntax) into nested group of selects only displaying when necessary.
The plugin, along with all the details for its use and some demos, can be found over on GitHub. Feel free to give feedback, contribute to the project, and use it wherever you like.
If you’d like to discuss your startup or project, get in touch with Simpleweb today.
