html - 选择具有多个复选框的元素

Question

Gmail 具有您可以使用复选框选择标签的功能，它隐藏在 div 元素中，您可以在其中上下滚动。

它还允许您自定义操作，例如在底部创建新标签。

它还允许您使用简单的搜索栏在顶部进行过滤。

实现类似的东西并允许我放入自定义操作（如底部的创建新标签）的最简单方法是什么？

至少有一种方法可以在可滚动的 div 或选择元素中显示所有复选框。

更新：

目前，我只有以下复选框

<div class="input select">
    <label for="SiteSite">Sites</label>
    <input type="hidden" name="data[Site][Site]" value="" id="SiteSite">

<div class="checkbox"><input type="checkbox" name="data[Site][Site][]" value="1" id="SiteSite1"><label for="SiteSite1">ODSite:P11379-440YishunAve11 HWSW_ESTA ENO21.000070.10001 92640145</label></div>
<div class="checkbox"><input type="checkbox" name="data[Site][Site][]" value="2" id="SiteSite2"><label for="SiteSite2">ODSite:P11374-SGRecClub HWSW_ESTA ENO21.000070.10002 92640147</label></div>

</div>

Answer 1

您可以使用名为Select2的插件，它具有您期望从<SELECT>标签中获得的所有选项。

http://img594.imageshack.us/img594/543/select2.png