This is a simple replacement for select elements if you have nested/sectioned options. Rather than ramble on some more, I’ll just show you the effect. You happen to be on a web page anyway.
So how does this all work?
It takes the original select that you put in and hides it. Then it creates a double with the sweet UI that you see, and updates the select as you add/remove options. You can see that in the second demo, along with the search capabilities.