从本地存储中设置 Select2 值

在使用 Select2 插件时，我们通常需要从服务器上动态获取选项数据。但是，在某些情况下，我们可能想要从本地存储中读取选项数据，例如从浏览器的本地存储或从客户端的缓存中读取数据。本文将介绍如何在 Select2 中从本地存储中设置值。

步骤 1：准备数据

首先，我们需要准备选项数据并将其存储在本地存储中。我们可以使用 localStorage 或 sessionStorage 将数据存储在客户端。例如，我们可以将一个包含选项数据的数组存储在本地存储中：

var options = [
  { id: 1, text: 'Option 1' },
  { id: 2, text: 'Option 2' },
  { id: 3, text: 'Option 3' },
];

localStorage.setItem('options', JSON.stringify(options));

步骤 2：初始化 Select2

接下来，我们需要初始化 Select2，并指定要加载选项的数据源。我们可以使用 ajax 选项来定义数据源，也可以手动设置选项。在本例中，我们将手动设置选项，如下所示：

var select = $('#my-select').select2({
  data: JSON.parse(localStorage.getItem('options')),
});

这将在 my-select 元素上初始化 Select2，并从本地存储中加载选项数据。

步骤 3：设置值

最后，我们可以使用 Select2 的 val 方法来设置选中的值。例如，我们可以从本地存储中读取一个默认值，并将其设置为 Select2 的选中值：

var defaultValue = 2;

select.val(defaultValue).trigger('change');

val 方法将选中的值设置为指定的值，并触发 change 事件。由于 Select2 是基于 jQuery 开发的，因此可以使用来自 jQuery 的方法和事件。

结论

通过本文，我们了解了如何从本地存储中加载选项数据并设置 Select2 的选中值。这使得我们能够在不使用服务器的情况下创建非常简单的 Select2 实例。