简介
html-select2 是一款基于 jQuery 的下拉框插件，它支持多选、异步加载数据等功能，并且 UI 界面友好，非常易用。在前端开发过程中，下拉列表是一个必不可少的组件。 html-select2 可以大大提升下拉列表的使用效率。本文将为大家介绍如何使用这个包。
安装
在使用 html-select2 之前，需要先安装它。
你可以通过 npm 安装：
npm install html-select2
或者直接引入官方 CDN
<link href="https://cdn.jsdelivr.net/npm/html-select2/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/html-select2/dist/js/select2.min.js"></script>
基本使用
在引入 html-select2 之后，我们就可以愉快地使用它了。
<select id="select2"></select>
<script>
$(document).ready(function() {
$('#select2').select2();
});
</script>使用 html-select2 很简单，只需调用 select2() 方法。这样，就会自动将 id="select2" 的下拉框转换成一个可搜索，可多选的下拉列表。
配置及自定义
html-select2 默认提供了非常好的 UI 体验。但是，有时候我们并不需要这么多功能，或者希望自定义一些样式。
单选/多选
通过配置 select2() 方法的 multiple 参数，可以实现单选和多选两种形态。
-- -------------------- ---- -------
---- -- ---
------- ------------------------
--------
---------------------------- -
-------------------------
------------------------ --- -- -----
---
---
---------
---- -- ---
------- -------------- ------------------
--------
---------------------------- -
--------------------------
---
---------异步加载数据
使用下拉列表最常见的需求就是根据用户输入进行筛选，并异步加载数据。
-- -------------------- ---- -------
------- ------------------------
--------
---------------------------- -
-------------------------
----- -
---- ------------
--------- -------
------ ----
----- ---------------- -
------ -
------- ------------ -- ------
----- ------------
--
--
--------------- -------------- ------- -
----------- - ----------- -- --
------ -
-------- -----------
----------- -
----- ------------ - --- - -----------------
--
--
--
------ -----
--
---
---
---------自定义样式
html-select2 默认提供了非常好的 UI 体验，但是有时候我们需要自定义样式。
-- -------------------- ---- -------
------- ------------------------
--------
---------------------------- -
-------------------------
--------------- --------------- -
-- ----------- -
------ -----------
-
--- ------ - --
--------- --------- - - -------------------------- - ------- - - ---------- - ---------
--
------ -------
--
---
---
---------在这个例子中，我们重载了 templateResult 方法，来自定义每一行的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671c030d092702382279a