jQuery Tree Multiselect

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.

// 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> // JavaScript var params = { sortable: true }; $("select").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").treeMultiselect({searchable: true, searchParams: ['section', 'text']});