Get data attribute of jQuery UI Selectable

Question

I have a jQuery UI selectable list: http://jqueryui.com/demos/selectable/

each row I generate has a unique ID that looks like:

<ol id="selectable">
  <li class="ui-widget-content" data-userid="5">test</li>
  <li class="ui-widget-content" data-userid="6">adfsg</li>
  <li class="ui-widget-content" data-userid="7">ghj</li>
  <li class="ui-widget-content" data-userid="8">fhjk</li>
  <li class="ui-widget-content" data-userid="9">fhn</li>
</ol>

What I need to do is loop through the list and get the data-userid attribute value for ones that are selected.

My JS so far is just this:

$('#selectable').selectable().bind("selectableselected",function(event,ui)
{

});

which if I do a console.log(ui.selected), I get the whole HTML string. I think I am going about this the wrong way. Any ideas?

Didier Ghys · Accepted Answer · 2011-12-20 22:26:43Z

3

The plugin adds a .ui-selected class for selected items so it's pretty easy to get the selected items.

The .map() function allows to return a (sort-of) array with a callback to return the data:

var ids = $('#selectable .ui-selected').map(function() {
    return $(this).data('userid');
});

// to get a pure javascript array
ids.toArray();

Here's a fiddle to play with.

answered Dec 20, 2011 at 22:26

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Didier Ghys Over a year ago

I have added some css and a more helpful alert to the fiddle.

Derk Arts · Accepted Answer · 2011-12-20 22:25:09Z

2

Assuming the class for a selected item would be ui-selected:

$('#selectable .ui-widget-content.ui-selected').each(function(index) {
     alert($(this).attr('data-userid'));
});

edited Dec 20, 2011 at 22:25

answered Dec 20, 2011 at 22:19

Derk Arts

3,4702 gold badges20 silver badges36 bronze badges

1 Comment

Ronnie Over a year ago

yea that currently gets ALL the userids, but very close!

Collectives™ on Stack Overflow

Get data attribute of jQuery UI Selectable

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related