jQuery-ui: How to programatically select selectables

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

Edit : Sorry for the misunderstanding, I'm editing my answer.

So, yes it is possible the selection of the object corresponds to the class ui-selected, so what you can do is :

$(#button).click(function(){
  $("#element1").addClass("ui-selected");

  .......

});

Answer 2

Is it not possible to trigger the selected event manually with .trigger('selected')?

Answer 3

Using Ionut code, how about:

 $("#selectable li:first").trigger('start').trigger('selecting').trigger('selected'); 

?

Answer 4

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! :)