what is the best jquery multiselect picker for hierarchical data

Question

I have a "flat" dropdown picker today with over 200 items. The issue is that the list is actually a hierarchy of data so I wanted to see if there was any picker that can show a hierarchy of data so people can see where each item fits into the overall list.

Right now I am concatenating the levels so it would show something like this:

level 1 --> level 2
level 1 --> level 2
level 1 --> level 2 --> level 3

but I thought there might be a better UI widget that would make it easier to pick from a list where the list itself has data a different levels.

Answer 1

Try this Checkbox Tree

EDIT 1

You can customize it easily to your exact needs, provided you are using the latest version, e.g to change the selecting-of-ancestors when a child is selected. See below:

(Line 45 onwards of checkboxtree.js)

        onCheck: {
            /**
             * Available values: null, 'check', 'uncheck', 'checkIfFull'
             */
            ancestors: 'check', /* <--- CHANGE THIS */
            /**
             * Available values: null, 'check', 'uncheck'
             */
            descendants: 'check',
            /**
             * Available values: null, 'collapse', 'expand'
             */
            node: '',
            /**
             * Available values: null, 'check', 'uncheck'
             */
            others: ''
        },

---

EDIT 2

If you have problems getting this to work check:

• That you have jquery.checkboxtree.js version 0.5 [version is at line 8 of the file].
• That you are referring to your local copy, and not an external version, and not a minified version
• Make sure you've changed 'check' to ''

Changing the source code isn't perhaps best practice. The official way to change the parameters uses code like this:

    $('#tree7').checkboxTree({
        onCheck: {
            ancestors: '',
            descendants: 'check'
        },
        onUncheck: {
        ancestors: 'uncheck'
        }
    });

You'll find an example almost like that on tab 7 of this page, and can see that it works with the 'checkIfFull' option. For me the '' option does work too.

Answer 2

It sounds like a cascading dropdown list could be suited. This is where the user selects the parent level from a dropdown and is then presented with another drop down list containing the child items and so on. These are commonly used on sites such as Ebay.

Stephen Walther has an old post on the basics that can get you started.

Note that it's not always necessary to do an Ajax call back to the server for each list. You may be able to get away with loading the complete list in a JSON object in a seperate JavaScript file and using a JQuery plugin to create and load the dropdowns. A quick search found this one but I'm sure there's plenty of others.