The .selectable() jQuery UI function allows the user to select one or more items from a list. The default action is that the user must hold down the CTL key to select more than one item. The item chosen will change color. You can choose to keep track of the selected items as well.

As with all jQuery UI functions, you must include a link to the jQuery core .js file and a link to the jQuery UI files. You can have a copy of these files locally with the rest of your files, or you can link to the Google library or the jQuery library with external links.

<script src="/js/jquery-1.10.2.js"></script> // load in the jQuery core file FIRST
<script src="/js/ui/1.11.2/jquery-ui.js"></script>


Here is a demo of .selectable() with a list of selected items.


Demo Source Code

$( "#selectable" ).selectable({
    stop: function() {
    var result = $( "#select-result" ).empty();
    $( ".ui-selected", this ).each(function() {
        var index = $( "#selectable li" ).index( this );
        result.append( "<br/>Item " + ( index + 1 ) + " " );

$("#refresh").click(function() {


The HTML for the demo:

<p id="feedback"><span>SELECTED:</span> <span id="select-result">none</span>
<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
<p>Hold CNTL key while selecting for more than one item</p>
<button id="refresh">REFRESH</button>