npm 包 @xsites/selectize 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

@xsites/selectize 是一个基于 jQuery 和 Selectize.js 开发的简单易用的多选下拉框插件。本文将就使用该 npm 包进行详细的介绍和使用教程。

安装

要使用 @xsites/selectize，您需要先安装它。使用以下命令：

npm install @xsites/selectize --save

在项目中引用

@xsites/selectize 是基于 jQuery 和 Selectize.js 开发的，因此在使用前需先引入 jQuery 和 Selectize.js 。安装完毕后，在需要使用的地方引入：

import $ from 'jquery';
import 'selectize';

import '@xsites/selectize/dist/selectize.css';
import Selectize from '@xsites/selectize';

@xsites/selectize 包含了一个默认样式表 selectize.css ，因此可以直接引入使用。

实例化 Selectize

接下来，您可以创建一个多选下拉框：

<select id="mySelect" multiple>
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
  <option value="4">选项四</option>
  <option value="5">选项五</option>
</select>

$('#mySelect').selectize({
  plugins: ['remove_button']
});

上述代码使用 jQuery 获取了上述 select，并实例化了一个 Selectize 对象。除了 remove_button 之外，该插件还支持其他插件，例如：drag_drop、optgroup_columns、restore_on_backspace、select_on_tab 等等。

方法

Selectize 对象支持多个调用方法，例如 addOption、addOptionGroup、addItem、clear 等等，这里将介绍其中一些比较常用的方法。

addOption

该方法用于添加一个选项：

var selectize = $('#mySelect')[0].selectize;
selectize.addOption({
  value: 6,
  text: '选项六'
});

addOptionGroup

该方法用于添加一个选项分组：

-- -------------------- ---- -------
--- --------- - ----------------------------
----------------------------------- -
  ------ ------
  -------- -
    ------- -- ----- --------
    ------- -- ----- --------
    ------- -- ----- -------
  -
---

addItem

该方法用于添加一个选中项：

var selectize = $('#mySelect')[0].selectize;
selectize.addItem(6);

clear

该方法用于清空选中项：

var selectize = $('#mySelect')[0].selectize;
selectize.clear();

事件

Selectize 对象也支持多个事件，例如 onInitialize、onItemAdd、onChange、onBlur 等等。

以下为一个基本的使用示例：

-- -------------------- ---- -------
------- ------------- ---------
  ------- ----------------------
  ------- ----------------------
  ------- ----------------------
  ------- ----------------------
  ------- ----------------------
---------

--------
--------------------------
  -------- ------------------
  ---------- --------------- -
    --------------------- - - -------
  --
  ------- ---------- -
    -------------------------
  -
---
---------

总结

本文介绍了如何在您的项目中使用 @xsites/selectize 插件，并详细介绍了它的实例化、方法和事件等。希望本文对您了解 @xsites/selectize 的使用方法有所帮助。如果您有任何疑问或建议，请在评论区留言。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066b5a51ab1864dac66f4f