jquery-select2 - 根据选项上的数据属性在 select2 中显示图像

Question

我想用 Select2 做一些像 templating example 一样的事情，但我没有使用预定义的图像集，所以需要稍微修改一下。

我想我可以将路径添加到我想在每个选项上使用数据属性显示的图像的路径，然后我可以使用 element.value 代替 element.attr('data-thumb') 但是当我这样做时，我得到 element.attr is not a function

HTML

<select>
  <option value="A" data-thumb="a.jpg">A</option>
  <option value="B" data-thumb="b.jpg">B</option>
  <option value="C" data-thumb="c.jpg">C</option>  
</select>

JS

function productStyles(selection) {
    if (!selection.id) { return selection.text; }
    var $selection = $(
      '<img src="' + selection.element.attr('data-thumb')+ '"> ' + selection.text
    );
    return $selection;
};

$('.img-changer').select2({
    templateResult: productStyles
});

是否可以使用 .element 访问数据属性，或者我是否需要另一种方法，如果可以，那会是什么？

Answer 1

原来我需要的是 var thumb = $(selection.element).data('thumb') 。

function productStyles(selection) {
  if (!selection.id) { return selection.text; }
    var thumb = $(selection.element).data('thumb');
    if(!thumb){
      return selection.text;
    } else {
      var $selection = $(
    '<img src="' + thumb + '" alt=""><span class="img-changer-text">' + $(selection.element).text() + '</span>'
  );
  return $selection;
  }
}