Select2 是一个流行的 jQuery 插件，用于创建美观、易用的选择框。然而，在使用 Select2 时，有时需要在初始化之后动态地更改下拉列表中的选项，这就需要我们了解如何在 Select2 中设置新的数据。
初始化 Select2
要使用 Select2，首先需要将其包含在项目中，并在 HTML 中定义下拉列表元素：
------- ------------------------
接着，在 JavaScript 中创建 Select2 实例并传入必要的选项：
-------------------------
----- -
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- -
-
---这里的 data 选项指定了下拉列表的选项，它是一个由对象组成的数组，每个对象都包含一个 id 和一个 text 属性，分别表示该选项的值和文本。
这样就完成了 Select2 的初始化，下拉列表会显示出指定的选项。
设置新数据
如果需要动态地更改下拉列表中的选项，可以使用 Select2 的 data 方法。这个方法可以通过传入一个新的数组来更新下拉列表中的选项。
--- ------- - - - --- -- ----- ------- -- -- - --- -- ----- ------- -- -- - --- -- ----- ------- -- - -- ------------------------------- ---------
这里的 newData 是一个新的包含选项的数组。调用 select2('data', newData) 方法可以更新下拉列表中的选项，使其显示为新数组中的选项。
需要注意的是，data 方法不会清除原来的选项，而是将新的选项添加到原有选项的后面。如果需要先清空原来的选项再添加新的选项，可以使用 select2('data', null) 方法先将下拉列表清空。
------------------------------- ------ -- ------- ------------------------------- --------- -- ------
总结
本文介绍了如何在 Select2 中设置新的数据以动态地更改下拉列表中的选项。通过调用 select2('data', newData) 方法，可以轻松地实现这一功能。需要注意的是，在设置新的数据时，旧数据并不会被清除，如果需要清空下拉列表，可以先调用 select2('data', null) 方法。
示例代码：
----------- ------- ------------------------ ------- -------------------- ---------------- ------- ------------------------ ----------------
------------
--- ------- - -
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- -
--
-------------------------
----- -------
---
----------------------------- ---------- -
--- ------- - -
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- -
--
------------------------------- -------------------------
---
------------------------------- ---------- -
------------------------------- ------
---来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28715