jQuery UI Selectable


The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by click or drag while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.


  • UI Core


A simple jQuery UI Selectable.


<!DOCTYPE html>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.selectable.js"></script>
  <script type="text/javascript">
<body style="font-size:62.5%;">
<div id="selectable"></div>






The jQuery UI Selectable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.selectable.css stylesheet that can be modified. These classes are highlighed in bold below.

Sample markup with jQuery UI CSS Framework classes

<ul class="ui-selectable">
   <li class="ui-selectee"></li>
   <li class="ui-selectee"></li>
   <li class="ui-selectee"></li>

Note: This is a sample of markup generated by the selectable plugin, not markup you should use to create a selectable. The only markup needed for that is