README

我个人创建了这个插件，尽可能保持其纯净，以用 Bootstrap 3 下拉组件替换 HTML <select> 输入的下拉模式，以便在保持选择简单性的同时结合 BS 下拉格式的功能。

功能

它模拟了一个 <select> 元素，可以完全按照您的需求进行格式化，不是非常棒吗？ :D
好的，它支持键盘导航：上、下、home、end、enter 和 escape！
好的，好的，它还支持在350毫秒的打字速度下进行自动搜索！

安装

您可以直接从其 GitHub 仓库下载最新版本：https://github.com/Webapper/droplect-js 或使用 composer

composer require webapper/droplect-js

确保文件将被放置在您的项目的 www 文档根目录中，以便远程用户代理可以访问它！

使用

您应该在 HTML 中包含 JS 和 CSS 文件，放在包含 jQuery 和 Bootstrap 的位置之后

<link href="webapper/droplect-js/src/droplect.css" rel="stylesheet">
<script src="webapper/droplect-js/src/droplect.js"></script>

注意： 您可以通过自定义基本的 BS3 下拉组件或重写我们的基本 droplect.css 来自定义 droplect 的用户界面。

单选模式

Droplect 通过其新的切换模式 droplect 扩展了 BS3 下拉，并可以使用 data-map-to 设置将选定的值映射到现有的 <input> 上（通过 ID），droplect 将复制选中项的 data-value 属性的值（参见 <li> 标签）

 <div class="dropdown">
     <input type="hidden" id="tricky" name="my-no-more-selects">
     <button id="dLabel" type="button" class="btn btn-default btn-droplect" data-toggle="droplect" data-map-to="tricky" aria-haspopup="true" aria-expanded="false">
         Droplect trigger
         <span class="caret"></span>
     </button>
     <ul class="droplect dropdown-menu" aria-labelledby="dLabel">
         <li data-value="option-1"><a href="#">Action</a></li>
         <li data-value="option-2"><a href="#">Another action</a></li>
         <li data-value="option-3"><a href="#">Something else here</a></li>
         <li role="separator" class="divider"></li>
         <li data-value="option-4"><a href="#">Separated link</a></li>
     </ul>
 </div>

只要它是可提交的 <form> 的一部分，我们示例中的 droplect 的值就可以通过访问 my-no-more-selects POST/GET 请求参数来获取。

多选模式

如果您想在多选模式下使用 droplect，只需将其按钮上的 data-multiple="multiple" 属性设置添加进去，并保持没有 data-map-to，因为多选映射应由您手动管理，使用 HTML 解决方案以保持您标记的更好一致性和灵活性。

在下面的示例代码中，我们使用了复选框输入，您可能已经注意到，无论是否使用 <input> 标签的 value 属性，都使用了所有 data-value 属性。

<div class="dropdown">
    <button id="multisel-droplect" type="button" class="btn btn-default btn-droplect form-control" data-toggle="droplect" data-multiple="multiple" aria-haspopup="true" aria-expanded="false">Combine my options! <span class="caret"></span></button>
    <ul class="droplect dropdown-menu" aria-labelledby="multisel-droplect">
        <li class="dropdown-header">Choose something</li>
        <li data-value="option-1"><a href="#" class="checkbox"><label><input type="checkbox" name="multisel[]" value="option-1">Action</label></a></li>
        <li data-value="option-2"><a href="#" class="checkbox"><label><input type="checkbox" name="multisel[]" value="option-2">Another action</label></a></li>
        <li data-value="option-3"><a href="#" class="checkbox"><label><input type="checkbox" name="multisel[]" value="option-3">Something else here</label></a></li>
        <li role="separator" class="divider"></li>
        <li data-value="option-4"><a href="#" class="checkbox"><label><input type="checkbox" name="multisel[]" value="option-4">Separated link</label></a></li>
    </ul>
</div>

要观察的事件

您可以通过使用以下方式监听切换的 DOM 元素在它们被触发时的事件

$('[data-toggle="droplect"]').on(...)

Droplect.js 支持以下事件

hide.bs.droplect 将在下拉菜单即将隐藏时触发（因此，在隐藏之前），
hidden.bs.droplect 将在 droplect 从现在开始隐藏时触发（因此，在菜单隐藏之后），
show.bs.droplect 将在下拉菜单即将显示时触发（它是在菜单变为可见之前），
shown.bs.droplect 将在下拉菜单变得可见后触发（这是在菜单变得可见之后），此外，在发生此事件后，将在最新选定的选项的 <a> 元素上触发一个 focus 事件，
select.bs.droplect 将在从您提供的选项列表中选择一个值后触发，
focus 事件将在选择一个值并关闭下拉菜单后触发，这是因为可用性问题。

此外，你可以在用于映射 data-map-to 属性中定义的选择的 DOM 元素上观察 change 事件。

使用实例

基本使用示例

想要一个活生生的试用吗？你可以！只需访问 https://jsfiddle.net/7raekpqp/ 来享受乐趣 :)

预选状态

在大多数情况下，我们使用服务器端渲染的表单输入组件，因此我们可能需要显示它们已填充和/或已选择。这同样适用于 Droplect.js，这意味着你可以使用 data-selected="selected" 属性来定义默认选定的选项（例如，代表用户之前存储的选择列表），

对于单选模式

 <li data-value="option-1"><a href="#">Action</a></li>
 <li data-value="option-2" data-selected="selected"><a href="#">Another action</a></li>
 <li data-value="option-3"><a href="#">Something else here</a></li>

对于多选模式

<li data-value="option-1" data-selected="selected"><a href="#" class="checkbox"><label><input type="checkbox" name="multisel[]" value="option-1" checked>Action</label></a></li>
<li data-value="option-2"><a href="#" class="checkbox"><label><input type="checkbox" name="multisel[]" value="option-2">Another action</label></a></li>
<li data-value="option-3" data-selected="selected"><a href="#" class="checkbox"><label><input type="checkbox" name="multisel[]" value="option-3" checked>Something else here</label></a></li>

你可能已经注意到，我们标记为已选的项目复选框也被标记为 checked，因此你应该保持复选框的状态。

一个演示在 https://jsfiddle.net/7raekpqp/1/ 上展示了这个功能，你可以检查一下。

法律信息

此组件基于原始的 Bootstrap v3.3.7 dropdown.js，尽管我对其中的大部分进行了修改，现在是时候感谢原始下拉菜单的作者了——谢谢大家！

顺便说一下，我对法律事务不是很感兴趣，我在代码下提到的条款是 WTFPL。

webapper / droplect-js

维护者

详细信息