使用 select2 获取数据属性值

简介

select2 是一款优秀的 jQuery 插件，它可以帮助我们轻松地将 select 标签变成一个强大的搜索框，支持 AJAX 数据加载、选项过滤、多选等功能。在使用 select2 时，我们经常需要获取选中项的数据属性值，本文将介绍如何使用 select2 获取数据属性值。

解决方法

使用 select2 获取数据属性值非常简单，只需调用选中项的 data() 方法即可，例如：

$('#myselect').on('select2:select', function (e) {
  var data = e.params.data;
  var myAttr1 = $(data.element).data('my-attr-1');
  var myAttr2 = $(data.element).data('my-attr-2');
  // TODO: do something with myAttr1 and myAttr2
});

在上面的示例中，当 select2 选中项改变时，我们使用了 select2 的 select2:select 事件监听器，并通过 e.params.data 获取了选中项的数据对象。然后，我们使用 jQuery 的 data() 方法获取了选中项的 my-attr-1 和 my-attr-2 属性值，保存在 myAttr1 和 myAttr2 变量中，可以根据需要做进一步操作。

示例代码

$('#myselect').select2({
  ajax: {
    url: '/api/mydata',
    dataType: 'json',
    processResults: function (data) {
      // TODO: transform data for select2
      return { results: data };
    }
  }
});

$('#myselect').on('select2:select', function (e) {
  var data = e.params.data;
  var myAttr1 = $(data.element).data('my-attr-1');
  var myAttr2 = $(data.element).data('my-attr-2');
  alert('myAttr1=' + myAttr1 + ', myAttr2=' + myAttr2);
});

上面的示例代码演示了如何使用 select2 加载 AJAX 数据，并获取选中项的数据属性值。在这个示例中，我们假设后端 API 返回的 JSON 数据格式如下：

[
  { "id": "1", "text": "Option 1", "my-attr-1": "foo", "my-attr-2": "bar" },
  { "id": "2", "text": "Option 2", "my-attr-1": "baz", "my-attr-2": "qux" },
  { "id": "3", "text": "Option 3", "my-attr-1": "corge", "my-attr-2": "grault" }
]

在 select2 的 AJAX 配置中，我们使用 processResults 函数将 JSON 数据转换成 select2 需要的格式。然后，在 select2 的 select2:select 事件监听器中，我们使用之前提到的方法获取选中项的数据属性值，并弹出一个对话框显示属性值。

参考链接

• select2
• jQuery data() 方法