CODEWITHSUNDEEP
javascriptjqueryjquery-ui
pdizz
pdizz

Reputation: 4240

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

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?

Upvotes: 3

Views: 1017

Answers (4)

jessegavin
jessegavin

Reputation: 75640

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>

Upvotes: 6

Ricardo Garza V.
Ricardo Garza V.

Reputation: 909

Just change te line

¥('selectable').selectable();

To

¥('idChosed').selectable();

For each element you choosed

Upvotes: -2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

The operational code is:

$(function() {
    $( "#selectable" ).selectable();
});

You can replace #selectable with any selector that points to what you want to make selectable. So it doesn't have to be an ID. It could be a class like .selectable.

Upvotes: 3

Rich
Rich

Reputation: 2096

Use a class instead of an element. An element's class can contain multiple value.

Upvotes: 2

Related Questions