How to programmatically select selectables with jQuery UI?

Question

I have a range of items that are selectable. I would like to add a button somewhere that activates a preset selection amongst those. Is there a way I can do that?

What I would like is to tell it to "Select these guys" and then have all the events and all fired as normal, so I don't have to call all of those selection events manually.

More info: The events that I talk about are the ones listed in their api and on their demo page:

• selected
• selecting
• start
• stop
• unselected
• unselecting

And also, I think there might be data that is set/cleared as well when selecting things. So it's not just to add those css classes.

Answer 1

Here is a variation of Alex R's code working with multiple elements

http://jsfiddle.net/XYJEN/1/

function SelectSelectableElements (selectableContainer, elementsToSelect) {     // add unselecting class to all elements in the styleboard canvas except the ones to select     $(".ui-selected", selectableContainer).not(elementsToSelect).removeClass("ui-selected").addClass("ui-unselecting");      // add ui-selecting class to the elements to select     $(elementsToSelect).not(".ui-selected").addClass("ui-selecting");      // trigger the mouse stop event (this will select all .ui-selecting elements, and deselect all .ui-unselecting elements)     selectableContainer.data("selectable")._mouseStop(null); } 

Update:

jQueryUI 1.10, per comments from kmk: http://jsfiddle.net/XYJEN/163/

Answer 2

Assuming the selectable sample on the jQuery UI website (http://jqueryui.com/demos/selectable/):

<style>     #feedback { font-size: 1.4em; }     #selectable .ui-selecting { background: #FECA40; }     #selectable .ui-selected { background: #F39814; color: white; }     #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }     #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }     </style>     <script>     $(function() {         $( "#selectable" ).selectable();     });     </script>    <div class="demo">  <ol id="selectable">     <li class="ui-widget-content">Item 1</li>     <li class="ui-widget-content">Item 2</li>     <li class="ui-widget-content">Item 3</li>     <li class="ui-widget-content">Item 4</li>     <li class="ui-widget-content">Item 5</li>     <li class="ui-widget-content">Item 6</li>     <li class="ui-widget-content">Item 7</li> </ol>  </div><!-- End demo --> 

you can have a function like:

    function selectSelectableElement (selectableContainer, elementToSelect)     {         // add unselecting class to all elements in the styleboard canvas except current one         jQuery("li", selectableContainer).each(function() {         if (this != elementToSelect[0])             jQuery(this).removeClass("ui-selected").addClass("ui-unselecting");         });          // add ui-selecting class to the element to select         elementToSelect.addClass("ui-selecting");          selectableContainer.selectable('refresh');         // trigger the mouse stop event (this will select all .ui-selecting elements, and deselect all .ui-unselecting elements)         selectableContainer.data("selectable")._mouseStop(null);     } 

and use it like:

// select the fourth item selectSelectableElement (jQuery("#selectable"), jQuery("#selectable").children(":eq(3)")); 

This can be improved to allow selecting a collection of elements, but it's a starting point to get you going.