我们可能有一种情况，我们希望用户从元素列表中选择。
AJAX允许HTML5和CSS3程序员该选项。
可选小部件是从普通列表中创建此函数的好方法。
用户可以拖动或者Ctrl +单击项目以选择它们。
特殊CSS类被自动应用于指示正在考虑选择或者选择的项目。

请按照以下步骤进行可选元素：

• 从无序列表开始。
  在HTML中构建标准的无序列表。给出UL一个id，以便它可以被标识为jQuery节点：

<div id = "selectableTab">
  <h2>selectable</h2>
  <ul id = "selectable">
  <li>alpha</li>
  <li>beta</li>
  <li>gamma</li>
  <li>delta</li>
  </ul>
 </div>

• 为选择和选择的状态添加CSS类。
  如果我们希望选择或者选择项目时可选择的项目更改外观，请添加如图所示CSS类。预定义一些特殊类(UI选择和UI选择)，并将在适当的时间添加到元素：

<style type = "text/css">
 h1 {
  text-align: center;
 }
 #selectable .ui-selecting {
  background-color: gray;
 }
 #selectable .ui-selected {
  background-color: black;
  color: white;
 }
 </style>

• 在init()函数中，将列表指定为可选节点。
  使用标准jQuery语法：可选()。

$("#selectable").selectable();

当他们被选中的类连接到的所有元素。
请务必为此类添加某种CSS，或者我们将无法判断已选择项目。

如果要使用已选择的所有项目进行操作，只需使用UI所选类创建一个jQuery组元素：

var selectedItems = $(".ui-selected");