Question

I want to enable multiselect capabilities in a jQuery UI Selectable table by holding shift.

I probably should do something like this if shift is held down on mouseclick

• Get topmost selected element
• Get clicked element
• Select all elements in between

but i can’t find how to do this in a clean way…

At the moment i got this inside the selectable configuration:

start: function(e)
        {
            var oTarget = jQuery(e.target);
            if(!oTarget.is('tr')) oTarget = oTarget.parents('tr');
        }

So oTarget is the clicked element (and e.currentTarget is the whole table) but now what? How can i find which elements are already selected in a way that can tell me if the clicked element is over or below the selected ones and select everything in between?

I’ve solved it now like this, added to the selectable element:

jQuery(table).mousedown(function(e)
    {
        //Enable multiselect with shift key
        if(e.shiftKey)
        {
            var oTarget = jQuery(e.target);
            if(!oTarget.is('.ui-selectee')) oTarget = oTarget.parents('.ui-selectee');

            var iNew = jQuery(e.currentTarget).find('.ui-selectee').index(oTarget);
            var iCurrent = jQuery(e.currentTarget).find('.ui-selectee').index(jQuery(e.currentTarget).find('.ui-selected'));

            if (iCurrent < iNew) {
                iHold = iNew;
                iNew = iCurrent;
                iCurrent = iHold;
            }

            if(iNew != '-1')
            {
                jQuery(e.currentTarget).find('.ui-selected').removeClass('ui-selected');
                for (i=iNew;i<=iCurrent;i++) {
                    jQuery(e.currentTarget).find('.ui-selectee').eq(i).addClass('ui-selected');
                }
                e.stopImmediatePropagation();
                e.stopPropagation();
                e.preventDefault();
                return false;
            }
        }
    }).selectable(...)

Answer 1

I wrote simple plugin for that functionality. It’s not dependent on jQuery ui Selectable plugin and as far as i know works fine with it.

You can find plugin code and simple example here: http://jsfiddle.net/bMgpc/170/

Going to write simple description below.

Basic usage:

$('ul').multiSelect();

If you hold “Ctrl” or “Command Key” then you can select/unselect elements one by one.

ul – parent that holds inner elements to be selected.

There are number of options available:

• keepSelection – true|false – quite an important flag. If set to true (default), then selection won’t be cleared if you click on already selected element (as it works in with multiple prop)
• multiselect – true|false -if false you can select only one element
• selected – ‘selected’ – class that will be added to selected element
• filter: – ‘ > *’ – what elements are we going to select
• unselectOn – false|’selector’ – if set then if clicked on set selector selectio would be removed
• start: false|function – callback on start
• stop: false|function – callback on stop
• unselecting: false|function – callback when clicked on set “unselectOn” option

---

It’s a dev version plugin, so use with care