如何在select2中为所选项添加图标？

Question

我正在使用fontawesome,我想添加或删除所选项目的图标.所以我这样做了:http ://jsbin.com/nasixuro/7/edit(感谢@Fares M.)

JS

$(document).ready(function () {

    function format_select2_icon(opti) {
        if (!opti.id) return opti.text; // optgroup

        if ($(opti.element).data('icon') == "1") {
            return opti.text + " <i class='fa fa-check'></i>";
        } else {
            return opti.text;
        }
    }

    $("#sel").select2({
        escapeMarkup: function(m) { return m; },
        formatResult: format_select2_icon,
        formatSelection: format_select2_icon
    });

    $("#addok").click(function() {
        actual_value = $("#sel").find(':selected').text();

        if (actual_value.indexOf(" <i class='fa fa-check'></i>") > -1){
            alert("asd");
            return;
        }

        newtext = actual_value + " <i class='fa fa-check'></i>";
        $("#sel").find(':selected').text(newtext).change();
    });

  $("#removeok").click(function() {

        actual_value= $("#sel").find(':selected').text();
        indexOk=actual_value.indexOf(" <i class='fa fa-check'></i>");

        if (indexOk > -1){
            newtext =actual_value.substring(0, indexOk);
            $("#sel").find(':selected').text(newtext).change();
            return;
        }

    });
});

HTML

 <select id="sel" style="width: 100%">
    <option value="1">Hello</option>
    <option value="2" data-icon="1">Friends</option>
    <option value="3">Stackoverflow</option>
</select>
<br><br>
<button id="addok">Add <i class='fa fa-check'></i></button>
<button id="removeok">Remove <i class='fa fa-check'></i></button>

如您所见,您可以在Hello和Stackoverflow项目中添加或删除图标,但是在Friends(使用formatSelection和格式化的选项formatResult)中,不会删除图标,如果您尝试添加图标,则会将另一个图标附加到现有图标.

你有什么想法解决这个问题吗？

Answer 1

我认为有两种方法可以实现这一目标:

1. 第一个解决方案是更好的解决方案,

   你可以通过在select2选项中定义一个escapeMarkup函数 来使它工作,并且这个函数必须返回与输入参数接收的相同数据而不做任何更改.

   你需要的只是:

   $("#sel").select2({
       escapeMarkup: function(m) { 
          return m; 
       }
   });
   

   这是一个有效的例子:http://jsbin.com/nasixuro/3/edit

2. 在第二一个,做一个小的变化select2.js文件.

   在检查了select2.js之后,我找到了更新文本的函数,并且有一点问题,select2.js插件转义html以防止js注入,所以要让它工作,因为你期望你必须避免转义html和使用来自jquery api的.html()函数插入你的html而不是select2.js的updateSelection函数中使用的.append()函数 .

   这是我正在谈论的功能:

   // single
   updateSelection: function (data) {
   
       var container=this.selection.find(".select2-chosen"), formatted, cssClass;
   
       this.selection.data("select2-data", data);
   
       container.empty();
       if (data !== null) {
           formatted=this.opts.formatSelection(data, container, this.opts.escapeMarkup);
       }
       if (formatted !== undefined) {
           container.append(formatted);
       }
       cssClass=this.opts.formatSelectionCssClass(data, container);
       if (cssClass !== undefined) {
           container.addClass(cssClass);
       }
   
       this.selection.removeClass("select2-default");
   
       if (this.opts.allowClear && this.getPlaceholder() !== undefined) {
           this.container.addClass("select2-allowclear");
       }
   },
   

   删除这个:

   if (data !== null) {
        formatted=this.opts.formatSelection(data, container, this.opts.escapeMarkup);
   }
   

   并改变:

   if (formatted !== undefined) {
        container.append(formatted);
   }
   

   至:

   if (data !== undefined) {
        container.html(data.text);
   }
   

   在我看来,这是一个肮脏的解决方案.

   对于Remove操作,请使用以下js代码:

   $("#removeok").click(function() {
   
       actual_value= $("#sel").find(':selected').text(), 
       indexOk =actual_value.indexOf(" <i class='fa fa-check'></i>");
       if (indexOk > -1){
           newtext =actual_value.substring(0, indexOk);
           $("#sel").find(':selected').text(newtext).change();
           return;
       }
   
   });
   

Answer 2

简单地替换<通过<在选项和删除格式功能:

<select id="sel" style="width: 100%">
    <option value="1">Hello</option>
    <option value="2">Friends &lt;i class='fa fa-check'>&lt;/i></option>
    <option value="3">Stackoverflow</option>
</select>

你可以在这里测试一下:http://jsbin.com/nasixuro/11/edit