jQuery UI：如果元素必须具有 id="selectable"，我如何才能拥有多个“可选择”元素？

Question

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?

Answer 1

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>

Answer 2

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 .

Answer 3

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

Answer 4

Just change te line

¥('selectable').selectable();

To

¥('idChosed').selectable();

For each element you choosed