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.

The HTML.

<select id="demo1" multiple="multiple">
  <option value="one" data-section="top" selected="selected" data-index="3">One</option>
  <option value="two" data-section="top" selected="selected" data-index="1">Two</option>
  <option value="three" data-section="top" selected="selected" data-index="2" data-description="A natural number">Three</option>
  <option value="four" data-section="top">Four</option>
  <option value="wow" data-section="top/inner/this/is/really/nested">Wow</option>
</select>

And the JavaScript.

var params = { sortable: true };
$("select#demo1").treeMultiselect(params);

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.

$("select#demo2").treeMultiselect({searchable: true, searchParams: ['section', 'text']});