select()


Selects an item or a collection of items.

Syntax
Selectable.select([items])

The method accepts a single argument in the following forms:

  • HTMLElement - the selectable element you want to select.
  • Number - the index of the selectable element (not it's index in the parentNode).
  • Object - a reference to the item stored in the items array.
  • Array - an array of nodes, indexes or objects. You may also pass instances of HTMLCollection or NodeList.

Selecting single items

Markup
<ul>
    <li class="ul-selectable"></li>
    <li class="ul-selectable"></li>
    <li class="ul-selectable"></li>
    <li class="ul-selectable"></li>
    ...
</ul>
Javascript

// All three of these methods will select the first item

// as a node
var item = document.querySelectorAll("li")[0];
selectable.select(item);

// as an index
selectable.select(0);

// as a reference to the item
var item = selectable.items[0];
selectable.select(item);

Selecting multiple items

Markup
<ul>
    <li class="ul-selectable">1</li>
    <li class="ul-selectable alt">2</li>
    <li class="ul-selectable">3</li>
    <li class="ul-selectable alt">4</li>
    <li class="ul-selectable">5</li>
    <li class="ul-selectable alt">6</li>
    <li class="ul-selectable">7</li>
    <li class="ul-selectable alt">8</li>
</ul>
Javascript
// Select the first 3 items via their indexes
var items = [0,1,2];
selectable.select(items);

// select all items with className "alt"
var items = document.querySelectorAll(".alt");
selectable.select(items);

// select all list items
var items = document.querySelectorAll("li");
selectable.select(items);
Result

    Using indexes

    <ul>
        <li class="ul-selectable">1</li> // index 0
        </li></li>
        </li></li>
        <li class="ul-selectable">2</li> // index 1
        <li class="ul-selectable">3</li> // index 2
        <li class="ul-selectable">4</li> // index 3
        </li></li>
        <li class="ul-selectable">5</li> // index 4
    </ul>
    

    Select the first, second and third items

    // incorrect
    selectable.select([0,3,4]);
    
    // correct
    selectable.select([0,1,2]);