jQuery select2：多选下拉框中使用AJAX的默认选择

在本文中，我们将介绍如何在使用AJAX加载选项的多选下拉框中设置默认选择，使用jQuery select2插件实现。

阅读更多：jQuery 教程

什么是jQuery select2插件？

jQuery select2是一个强大的下拉框插件，它提供了许多功能和选项，使得操作下拉框变得简单快捷。其中一个重要的功能是支持使用AJAX动态加载下拉框的选项。

使用jQuery select2插件，我们可以通过AJAX请求从服务器加载选项集合。当用户搜索选项时，将会发送AJAX请求并显示搜索结果。

默认选择的需求

在一些场景中，我们可能需要在多选下拉框中设置默认选择项。例如，一个编辑页面需要显示已经保存的选项，我们希望这些已选择的选项在加载页面时就被默认选中。

实现默认选择

要在使用AJAX加载选项的多选下拉框中设置默认选择，我们可以通过以下步骤来实现：

加载选项

首先，我们需要使用AJAX请求从服务器加载选项集合。在使用jQuery select2插件时，我们可以通过ajax选项来实现。

$('#select2').select2({
  ajax: {
    url: 'example.com/options',
    dataType: 'json',
    processResults: function (data) {
      return {
        results: data
      };
    }
  }
});

在上面的例子中，我们使用了一个示例的URL来加载选项。在实际使用中，你需要将URL替换为你自己的AJAX请求URL。同时，你还可以根据需要为AJAX请求添加其他选项，如请求方法、数据类型等。

设置默认选择

一旦选项集合被加载到下拉框中，我们就可以设置默认选择。在jQuery select2插件中，默认选择可以是已经加载的选项，或者是通过AJAX请求加载的选项。

默认选择已加载的选项

要设置默认选择已经加载的选项，我们可以在初始化时使用val方法。这个方法可以接收一个值或一个数组作为参数来设置默认选择。

$('#select2').val(['option1', 'option2']).trigger('change');

在上面的例子中，我们将option1和option2作为默认选择值。由于我们设置了默认选择，所以需要调用trigger('change')来触发下拉框的更新。

默认选择通过AJAX加载的选项

要设置默认选择通过AJAX加载的选项，我们需要先确保已经加载完成。一种简单的方法是使用select2:select事件。

$('#select2').on('select2:select', function (e) {
  var data = e.params.data;
  if (data.id === 'option3') {
    $(this).val(['option3', 'option4']).trigger('change');
  }
});

在上面的例子中，我们使用select2:select事件来监听选项的选择。当选择了option3时，我们将option3和option4作为默认选择。再次强调，在调用val方法后需要使用trigger('change')来触发下拉框的更新。

示例说明

让我们通过一个具体的示例来说明如何在多选下拉框中使用AJAX加载选项并设置默认选择。

假设我们有一个品类的多选下拉框，需要从服务器加载选项集合，并默认选择已经选择的品类。以下是示例的HTML代码：

<select id="categories" multiple="multiple" style="width: 200px;"></select>

我们使用了一个select元素，并为其添加了id属性和multiple属性，使其成为多选下拉框。

然后，在JavaScript中，我们使用jQuery select2插件初始化这个多选下拉框，并使用AJAX动态加载选项集合，同时设置默认选择为已选择的品类。

$(document).ready(function () {
  $('#categories').select2({
    ajax: {
      url: 'example.com/categories',
      dataType: 'json',
      processResults: function (data) {
        return {
          results: data
        };
      }
    }
  });

  var selectedCategories = ['category1', 'category2'];
  $('#categories').val(selectedCategories).trigger('change');
});

在上面的代码中，我们使用了一个示例的AJAX请求URL，并定义了一个名为selectedCategories的数组作为默认选择。在实际使用中，你需要将URL替换为你自己的AJAX请求URL，同时根据你的需求设置selectedCategories数组。

通过上述代码，我们可以在页面加载时动态加载品类选项，并将已经选择的品类设置为默认选择。