jQuery UI multiple selections

Question

Hello

see this demo from jquery ui you have to hold down the Ctrl key to make multiple selections I really like the code but I don't want to force my visitor to press ctrl key I want the code to allow multiple selections without holding ctrl key

is this possible?

Answer 1

Yes. However, the implementation would have to allow selected items to be deselected when clicked on a second time. You would just need to modify the code slightly to achieve this.

Do a .selectable( 'Enable' ) on all the items.

Then you will need to do a .selectable( 'toggle' ) onClick on all items.

That should do the trick.

Answer 2

I asked you a questions in the comments but I'll just write up a simple selection solution so you can see what I was thinking.

So basically you can use the jquery toggle() effect to roll your own selector. When a user clicks you'll add the orange class, when he clicks again it will remove the orange class.

$(document).ready( function() {
    $('ul#selectable li').toggle( function() {
        $(this).addClass('orange'); }, function() {
        $(this).removeClass('orange'); } );
});

Then all your job is to grab all the li elements with the orange class and post them to a form or whatever your end goal is. Haven't checked this code but what your doing is asking for all the li elements within selectable that have the orange value at the end of the class attribute.

With the code below I'm creating a new array and then adding the text() value of each "orange li" into it.

var theSelections = new Array();

$('ul#selectable li[class$="orange"]').each( function(i) {
    theSelections[i] = $(this).text();
});