Results tagged “html” from Just Another Stupid Blog

Paired multi-selects with Optgroups

| | Comments (0)

One of the most underused HTML elements is the optgroup. When you have a select with many options, you can separate them into groups, indented with labels. Like this:

One of my least favorite web idioms is the paired multi-select where you have two select boxes and buttons to move items between them. For work, I needed to add optgroups to an existing paired-select. Unfortunately, simply adding the optgroups revealed limitations in the Javascript that moves the items left and right. I looked around on the web and couldn’t find any examples that implemented this with optgroups in mind. Most of the implementations I’ve seen re-sort and completely recreate both lists on each move. It seemed like trying to add optgroups into this method would be problematic so I decided to try and come up with something from scratch…