Question

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

我以为我可以在每个选项的数据属性上添加我想要显示的图像的路径，然后代替Request myR = new Request( ); Request.Custom myCustom = myR.new Custom(); myCustom.setid("17");我可以使用element.value但是当我这样做时，我得到 element.attr不是函数

HTML

element.attr('data-thumb')

JS

<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>

是否可以使用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 });访问数据属性，或者我是否需要其他方法？如果是，那会是什么？

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;
  }
}

Answer 2

<option class="img class" value=""></option>    

function formatSelect2(o) {
if (!o.id)
    return o.text;
else
    return $("<span><i class='" + $(o.element).attr("class") + "'></i> " + o.text + "</span>"); }     

$('#Category-Add').select2({
        width: '100%',
        templateResult: formatSelect2,
        templateSelection: formatSelect2,
        theme: "classic"
    });

根据选项上的数据显示select2中的图像

2 个答案: