Selectr-th是一个轻量级的JavaScript库，它提供了自定义下拉选择框的功能。它可以轻松地将一个普通的下拉选择框转换成一个高度可定制的下拉选择框。
在本篇文章中，我们将详细讲解Selectr-th的使用方法，并通过示例代码来演示如何将其应用于实际项目中。
安装
要安装Selectr-th，请使用npm包管理器：
--- ------- ---------- ------
开始使用
以下是一个最简单的Selectr-th使用示例：
--------- -----
------
------
----------------- ------------
----- ---------------- --------------------------
-------
------
------- ---------------
------- ---------------- ----------
------- ---------------- ----------
------- ---------------- ----------
------- ---------------- ----------
---------
------- ---------------------------------
--------
----- -------- - --- ----------------------
---------
-------
-------这个例子非常简单，但它已经展示了Selectr-th如何工作。我们首先将Selectr-th的CSS文件添加到页面中，然后添加一个普通的下拉选择框。最后，我们在脚本中实例化了一个Selectr实例，并将其绑定到了我们的下拉选择框上。
现在，您应该已经看到了Selectr-th的默认表现形式：
组件包含一个默认的箭头，该箭头出现在下拉选择框的右侧。您可以通过修改CSS类来定制它的样式，或者完全自定义箭头。接下来，让我们深入了解Selectr-th的各种选项和用法。
控件
Selectr-th支持一些控件来控制选择器的不同方面。下面是一个列表和说明：
closeOnSelect- 用户选择一个选项时，是否自动关闭下拉列表。默认为true。components- 控制Selectr-th控件的不同部分的显示。默认情况下，包括箭头和选择框。data- 要填充到下拉列表中的数据列表。可以是以简单数组形式表示的字符串列表，也可以是以对象数组形式表示的更加复杂的数据。dropdownDirection- 控制下拉列表的打开方向。可以是up或down。默认值为down。maximumSelections- 用户可以执行的最大选择数。默认值为Infinity，即无限选择。placeholder- Selectr选择框的占位符文本。默认为空字符串。selectedValue- 当前选中的选项的值。默认为空字符串。showSearch- 是否显示搜索框。默认值为true。theme- 控制主题的字符串（可以是default、minimal、classic或自定义）。默认值为default。
事件
Selectr-th支持以下事件：
selectr.addedSelection: 当有一个新的选择被添加到组件中时触发。传递的参数包括添加的选项的值和文本。selectr.blur: 当选择框失去焦点时触发。selectr.change: 当选择框的值更改时触发。传递的参数包括更改前的值和更改后的值。selectr.close: 当下拉列表关闭时触发。selectr.destroy: 当Selectr实例被销毁时触发。selectr.init: 在Selectr实例化时触发。selectr.keydown: 在选择框中按下键盘键时触发。selectr.open: 下拉列表被打开时触发。selectr.removeSelection: 当一个选择从组件中删除时触发。传递的参数包括已删除选项的值和文本。selectr.select: 当选择一个选项时触发。传递的参数包括选择的选项的值和文本。selectr.search: 当搜索框中输入文字时触发。传递的参数包括当前的搜索文本。
要使用这些事件，可以像这样为Selectr-th实例添加一个事件监听器：
----- -------- - --- ---------------------- ----------------------------- -- -- - --------------------- ---
或者，您还可以使用addEvent方法：
----------------------------------- -- -- - --------------------- ---
方法
以下是一组可用于Selectr-th的公共方法。详情请参见Selectr-th的API文档。
add: 将一个项目添加到下拉列表中。参数可以是一个字符串，也可以是一个对象。destroy: 销毁Selectr-th实例，从下拉选择框中删除组件并解除事件监听器。disable: 禁用Selectr-th选择框。enable: 启用Selectr-th选择框。getData: 返回Selectr-th下拉列表中的当前数据。getItem: 根据提供的值返回选项。可选地，您可以传递一个回调来处理结果。getSelected: 返回当前选择的值。open: 在选择框中呈现选择列表。remove: 根据选项的值从下拉列表中删除一个项目。如果存在多个匹配的项目，则删除它们所有。setSelected: 根据提供的值选择一个选项。
示例
以下是一个较复杂的使用Selectr-th的示例。在这个例子中，我们使用一个自定义的样式表来完全改变了选择框的外观，并禁用了选择项的搜索和下拉列表的自动关闭。
--------- -----
------
------
----------------- ------------
----- ---------------- --------------------------
----- ---------------- -----------------------------
-------
------
------- -------------- ---------
------- --------- --------------- ----------
------- ---------------- ----------
------- ---------------- ----------
------- ---------------- ----------
------- ---------------- ----------
---------
------- ---------------------------------
--------
----- -------- - --- --------------------- -
-------------- ------
----------- ------
------ --------
---
---------
-------
-------在这个例子中，我们将Selectr-th的CSS文件添加到页面中，并添加一个可多选的下拉选择框。我们还添加了一个指向自定义样式表的链接。注意，我们也添加了一个selected属性来选择初始值。
在脚本中，我们为Selectr-th实例设置了三个选项。首先，我们禁用了选择项的搜索框。然后，我们禁用了下拉列表的自动关闭选项，以便用户可以浏览多个选项。最后，我们将主题设置为custom，这是自定义CSS样式表中使用的类名。
通过这个例子，您应该可以看到Selectr-th的强大之处。它几乎可以实现任何您想要的样式，并为使用者提供了大量的控制选项。
结论
在本文中，我们已经学会了如何使用Selectr-th。我们已经了解了如何自定义外观、控制控件和处理事件。我们还通过示例代码演示了如何在实际项目中使用Selectr-th选择器。
希望这篇文章对您有所帮助。如果您需要更多信息，请访问Selectr-th的官方文档。感谢您的阅读！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562f681e8991b448e0c00