简介
es-selectize 是一个基于原生 select 标签的上层封装，提供了丰富的配置和样式，方便开发者快速搭建用户友好的下拉选择框。该 npm 包可以应用于前端开发中，支持多种配置和使用方式。
安装
通过 npm 安装：
npm install es-selectize
或者通过 yarn 安装：
yarn add es-selectize
快速使用
引入
在页面中引入
-- -------------------- ---- ------- ---- -- --- --- ----- ---------------- ------------------------------- -- ---- -- -- --- ------- --------------------------------------- ---- - ---- ----- ------ -- --- ------- -------------- ------- -------------------------- ------- -------------------------- ---------
在模块化项目中引入
import "es-selectize/dist/es-selectize.css";
import esSelectize from "es-selectize";
const mySelect = document.querySelector("#mySelect");
esSelectize(mySelect);配置
通过传递一个配置对象，可以自定义下拉选择框的样式和功能。
-- -------------------- ---- -------
----- -------- - ------------------------------------
----- ------ - -
-- -------
------ ------
-- ---------
-------------- ------
-- ---------
------------- -----
-- -----------
--------- ------
-- ------
------ -------
-- -----------------
------- -----------
-- -----
---------- -----------------
-- -------
------- -----
-- -------------
-------- ---------- -
------------------- -- ---------
--
-- -------------
------- ---------- -
------------------- -- ---------
--
-- ------------
--------- --------------- ----- ------ -
--------------------- ------- ------ ----- -------
--
--
--------------------- --------实战应用
Demo 1 - 基础用法
在此示例中，我们演示如何基于 es-selectize 实现一个基础的下拉选择框。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------------- ------------
----- ---------------- -------------------------------------------------------- --
-------
------
---- ------------------
----------------
------- --------------- ----------- ---------
------- --------------------------
------- ------------------------
------- --------------------------------------
------- ------------------------
------- ----------------------------
------- --------------------------------
---------
------
------- ----------------------------------------------------------------
--------
----- ------- - ----------------------------------
----- ------ - -
------ --------
--------- -----
-------------- -----
------------- -----
-------- ---------- -
------------------- -------- -- ---------
--
------- ---------- -
------------------- -------- -- ---------
--
--------- --------------- ----- ------ -
--------------------- -------- -------
--
--
-------------------- --------
---------
-------
-------Demo 2 - 进阶用法
在此示例中，我们演示如何利用 es-selectize 实现一个带有关联性的下拉选择框。当第一个下拉框选择具有关联性的项目时，第二个下拉框将自动更新相应的选择项。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------------- ---- - ----------------
----- ---------------- -------------------------------------------------------- --
-------
------
---- ------------------
----------------------
---- -------------------------
------- --------------- --------------
------- ----------------------
------- ----------------------
------- ----------------------
---------
------
---- -------------------------
------- ----------- --------- ---------
------- -----------------------
---------
------
---- -------------------------
------- --------------- ------------- ---------
------- -----------------------
---------
------
------
------- ----------------------------------------------------------------
--------
----- --------- - ------------------------------------
----- ----- - --------------------------------
----- --------- - ------------------------------------
----- ------ - -
--- --------
--- --------
--- ------- ------ ------ -------
--
----- --------- - -
---- ------- ------ ------ -------
---- ------- ------ ------ -------
---- ------- ------ ------ -------
---- ------- ------ ------ -------
---- ------- ------ -------
---- ------- ------ ------ -------
--
----- ------ - -
------ ------
--------- ------
-------------- ------
------------- ------
-------- ---------- -
--------------------- -- ---------
--
------- ---------- -
--------------------- -- ---------
--
--------- --------------- ----- ------ -
-- -------------------- --- --------- -- -------------- -
--------------- - -------- -------------------------
------------------- - -------- -------------------------
------------------------------------ -
--------------- -- -------- ----------------------------------
---
-------------- - ------
------------------ - -----
-------------------
-
-- -------------------- --- ----- -- ----------------- -
------------------- - -------- -------------------------
------------------------------------------- -
------------------- -- -------- ------------------------------------------
---
------------------ - ------
-----------------------
-
--
--
---------------------- --------
---------
-------
-------总结
es-selectize 是一个实用的 npm 包，可以快速搭建高效的下拉选择框。通过合理的配置和使用，可以轻松实现多种复杂场景下的需求。上述两个示例仅仅是其中的冰山一角，更多使用方法和技巧可以参考官方文档或者自行探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601281e8991b448de11e