Select2动态添加图像图标到选项答案

【问题标题】：Select2 add image icon to option dynamicallySelect2动态添加图像图标到选项
【发布时间】：2015-05-31 04:09:52
【问题描述】：

这就是 select2.github.io 给你的：

function addIcons(opt) {
    if (!opt.id) {
        return opt.text;
    }
    var $opt = $(
            '<span><img src="/images/flags/' + opt.element.value.toLowerCase() + '.png" class="img-flag" /> ' + opt.text + '</span>'
            );
    return $opt;
}

我想在我的选项中添加一个 data-image 属性：

<option value="flag" data-image="/images/flags/flag.png">Country 1</option>

并将其记录到函数中：

function addIcons(opt) {
    if (!opt.id) {
        return opt.text;
    }

    var optimage = opt.attr('data-image');
    var $opt = $(
            '<span><img src="/images/flags/' + optimage + '" class="img-flag" /> ' + opt.text + '</span>'
            );
    return $opt;
}

可悲的是，一个简单的 console.log(opt);在函数中不返回任何内容，所以我看不到我是否可以访问我的 data-image 属性。上面的代码块返回一个错误，所以这显然是行不通的。对这个问题有什么建议吗？

【问题讨论】：

一个错误？具体的错误信息是什么？你有 jsfiddle 演示吗？

标签： jquery jquery-select2

【解决方案1】：

使用 attr 解决并在 Select2 4.0.6-rc.0 上测试。

$(".class").select2({
    templateResult: formatState,
    templateSelection: formatState
});

function formatState (opt) {
    if (!opt.id) {
        return opt.text.toUpperCase();
    } 

    var optimage = $(opt.element).attr('data-image'); 
    console.log(optimage)
    if(!optimage){
       return opt.text.toUpperCase();
    } else {                    
        var $opt = $(
           '<span><img src="' + optimage + '" width="60px" /> ' + opt.text.toUpperCase() + '</span>'
        );
        return $opt;
    }
};

【讨论】：

【解决方案2】：

如果 optimage 返回“未定义”，请尝试我的示例：它工作正常：

$("#selectUserForChat").select2({
  templateResult: addUserPic,
  templateSelection: addUserPic
});

function addUserPic(opt) {
  if (!opt.id) {
    return opt.text;
  }
  var optimage = $(opt.element).data('image');
  if (!optimage) {
    return opt.text;
  } else {
    var $opt = $(
      '<span class="userName"><img src="' + optimage + '" class="userPic" /> ' + $(opt.element).text() + '</span>'
    );
    return $opt;
  }
};

【讨论】：

【解决方案3】：

我用这段代码解决了问题：var optimage = $(opt.element).data('image');

$(".category").select2({
            templateResult: formatState,
            templateSelection: formatState
        });
        function formatState (opt) {
            if (!opt.id) {
                return opt.text;
            }               
            var optimage = $(opt.element).data('image'); 
            if(!optimage){
                return opt.text;
            } else {                    
                var $opt = $(
                    '<span><img src="' + optimage + '" width="23px" /> ' + opt.text + '</span>'
                );
                return $opt;
            }

        };

【讨论】：

这与我的示例相同，但不起作用： var optimage = opt.attr('data-image');
我尝试完成答案

【解决方案4】：

试试这个：

var optimage = $(opt).data('image'); //or $(opt).attr('data-image')
var $opt = $(
    '<span><img src="' + optimage + '" class="img-flag" /> ' + $(opt).text() + '</span>'
);

【讨论】：

优化返回“未定义”。我也试过这种方式。

【解决方案5】：

不一定与问题相关，但在我的情况下它不起作用，因为如果您使用 Select 2 templateResult 和 templateSelection 不存在。请改用formatResult 和formatSelection。

【讨论】：