jQuery selectable list items

Question

I want to be able to get information about the selected item in the ordered list whose ID is #selectable. The below code returns the ID #selectable, I'm looking for the id of the item I just selected.

$('#selectable').selectable({
   selected: function (event, ui) {
       alert($(this).attr('id').toString());
   }
});

Any ideas?

Answer 1

Ok, firstly of course it's going to return 'selectable' as that is the ID of the element. Secondly you don't have to use toString on the attr function, it returns a string anyway. Thirdly what is the ordered list you are looking at, you should be a little more verbose in your postings. Perhaps you mean to be making the selectable call on your .selectable items?

$('.selectable').selectable({
    selected: function (event, ui) {
        alert($(this).attr('id'));
    }
});

Answer 2

When you select an item using Selectable, jQuery adds ui-selected to the selected elements' classes. So, to get the selected items just use the .ui-selected selector:

$('#selectable').selectable({
   selected: function (event, ui) {
       console.log($('#selectable .ui-selected'));
   }
});

Answer 3

Try this:

$('#selectable').selectable({
 selected: function (event, ui) {
  alert($(this).find('.ui-selected').attr('id'));
}

Answer 4

isnt this sort of what you were looking for? http://jqueryui.com/demos/selectable/#serialize

I think it would be easy to modify to your purpose.