JQuery UI: How can I have more than one & ldquo; Selecttable & rdquo; Element if element must have id = & ldquo; Selecttable & rdquo;

advertisements

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?


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>