Programmatic Selection With The Selectable Widget

Adding a new option to the selectable jQuery UI widget to support selecting items programmatically.

HTML

<ol id="selectable">
	<li style="width:190px" class="ui-state-default">2016</li>

	<li class="ui-state-default">JAN</li>
	<li class="ui-state-default">APR</li>
	<li class="ui-state-default">JUL</li>
	<li class="ui-state-default">OCT</li>
	<li class="ui-state-default">FEB</li>
	<li class="ui-state-default">MAY</li>
	<li class="ui-state-default">AUG</li>
	<li class="ui-state-default">NOV</li>
	<li class="ui-state-default">MAR</li>
	<li class="ui-state-default">JUN</li>
	<li class="ui-state-default">SEP</li>
	<li class="ui-state-default">DEC</li>
</ol>

<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>

CSS

#feedback { font-size: 1.4em; }
	#selectable .ui-selecting { background: LIGHTBLUE; }
	#selectable .ui-selected { background: BLUE; color: white; }
	#selectable { list-style-type: none; margin: 0; padding: 0; width: 200px; }
	#selectable li { margin: 3px; padding: 1px; float: left; width: 40px; height: 15px; font-size: .8em; text-align: center; }

li {
    margin: 0.4em;
    padding: 0.2em;
}

.ui-selected, .ui-selecting {
    font-weight: bold;
}

JavaScript

(function( $ ) {

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