如何将实际选项值添加到列表项中？

Question

使用 select2 javascript 作为选择框，它基本上隐藏了实际的真实选择框，并为您提供了一个包含 ul li 列表的范围。

但是，li 选项并不具有原始的实际值。

有没有办法让 select2 的 li 项具有真正的价值？

例如这是原文：

<option value="2" selected="" data-select2-id="6">Test Item</option>

Select2 会将其变成：

<li class="select2-selection__choice" title="Test Item" data-select2-id="7"><span class="select2-selection__choice__remove" role="presentation">×</span>Test Item</li>

我想要的是添加到其中的实际值“2”，这样我就可以使用任何外部 JS 轻松地拉取它。像 data-real-value="2" 之类的东西就可以了。

我用它进行多选，使用 AJAX 来实际提取结果，如下所示：

var $selectclass = $("#select2ajax").select2({
    selectOnClose: true,
    width: '100%',
    ajax: {
      url: "ajaxcall.php",
      dataType: 'json',
      delay: 250,
      data: function (params) {
        return {
          q: params.term // search term
        };
      },
      processResults: function (data) {
        return {
          results: $.map(data, function(obj) {
            return { id: obj.id, text: obj.text };
          })
        };
      },
      cache: true,
    },
    minimumInputLength: 2,
    containerCssClass: 'class',
    dropdownCssClass: 'class',
    });

如果您想知道为什么，我只是想能够检测到有人用鼠标单击列表中的现有标签，然后执行某些操作。 Select2 似乎没有直接执行此操作的选项，只有当内容被“选择”（添加）到框中时。除非我弄错了。

Answer 1

（终于）找到了更好的方法。只需将一个可点击的链接添加到实际 select2 选项内的结果中，并提供真实的 ID。希望它对某人有帮助。

function formatItem (item)
{
    if (!item.id) {
        return item.text;
    }
    return $('<span>' + item.text + ' (<a href=\"/link/'+ item.id + '\" target="_blank">Item ID Link</a>)</span>');
}

在 select2 设置选项中使用它，如下所示：

var $gamesMulti = $("#select2ajax").select2({
    selectOnClose: true,
    width: '100%',
    ajax: {
      url: "search.php",
      dataType: 'json',
      delay: 250,
      data: function (params) {
        return {
          q: params.term // search term
        };
      },
      processResults: function (data) {
        return {
          results: $.map(data, function(obj) {
            return { id: obj.id, text: obj.text };
          })
        };
      },
      cache: true,
    },
    minimumInputLength: 2,
    containerCssClass: 'class',
    dropdownCssClass: 'class',
    templateSelection: formatItem
    });