How to programmatically select selectables with jQuery UI?

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/

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 itemselectSelectableElement (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.

There you go:

,calc: function() { this._mouseStop(); },custom: function(guys) {  var self = this;  self.selectees.removeClass("ui-selected");  guys.each(function(){    $(this).addClass("ui-selecting");    self._trigger("selecting", {}, {       selecting: this    });  });  this.calc(); // do the selection + trigger selected} 

Add this after _mouseStop in selectable.js and then you can say:

$("#selectable").selectable("custom", $("#selectable :first-child"));

... or whatever you like.

Have fun! :)