jQuery UI: How can I have more than one "selectable" element if the element has to have id="selectable"?

javascript, jquery, jquery-ui

Solution

It is not a requirement to use an id. In fact, you aren't required to use html lists either.

The following example uses a `<div>` as the container and `<span>` elements as the selectable items.

<div class="group">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

<script>
  $(".group").selectable({ filter: 'span' });
</script>

The next example uses a data attribute selector `[data-album]` to target multiple containers. Each of these `<p>` elements will be converted into a separate selectable with their child `<img>` elements as selectees.

<p data-album="Vacation">
  <img src="..." />
  <img src="..." />
  <img src="..." />
</p>


<p data-album="Birthdays">
  <img src="..." />
  <img src="..." />
  <img src="..." />
</p>

<script>
  $("[data-album]").selectable({ filter: 'img' });
</script>

Problem

All of the demo's ive been able to find follow this pattern: ``` <ol id="selectable"> <li class="ui-widget-content">Item 1</li> <li class="ui-widget-content">Item 2</li> .. </ol> ``` jQuery UI selectable demo I've tried changing the ID of the list to something unique but it doesn't seem to work. Is it a requirement that the selectable element have and id of "selectable" and if so, how can you make more than one list selectable?

Original source