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和{{格式化的选项1}}），不删除图标，如果您尝试添加图标，则将另一个图标附加到现有图标。

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

Answer 1

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

第一个解决方案是更好的解决方案，

你可以通过在中定义 escapeMarkup 函数来使其工作 select2 选项，此函数必须返回收到的相同数据作为输入参数，没有任何变化。

您需要的只是：
```
$("#sel").select2({
    escapeMarkup: function(m) { 
       return m; 
    }
});
```
这是一个有效的例子：http://jsbin.com/nasixuro/3/edit

第二个，在 select2.js 文件中进行少量更改。

在检查 select2.js 之后，我找到了更新文本的函数，并且出现了一些问题， select2.js 插件转义 html以防止js注入，所以要让它像你期望的那样工作避免转义html并使用jquery api中的 .html（）函数插入你的html而不是使用的 .append（）函数 select2.js 的 updateSelection 功能。

这里是我正在谈论的功能：

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

在我看来，这是一个肮脏的解决方案。

对于删除操作，请使用此 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

Answer 3

Manbe你可以使用select2参数：formatResult或formatSelection，如下所示

$(document).ready(function () {

    $("#sel").select2();

    $("#addok").click(function() {
       $("#sel").select2({
          //formatResult: format
          formatSelection: format
          //escapeMarkup: function(m) { return m; }

       });
    });
});

function format(state) {
   if (!state.id) return state.text; 
   return "<i class='fa fa-check'></i>" + state.text;
}

JSBIN

Answer 4

您无需手动执行DOM操作

var icon_checked = "<i class='fa fa-check'></i>";

function format(opt) {
    var selection = this.element.select2("val");

    if (opt.id === selection) {
        return opt.text + icon_checked;
    }
    return opt.text;
}   

$("#sel").select2({
    formatResult: format
});

基本上this.element会返回select元素实例，您可以在其上运行.select2("val")以获取所选值。

将它与对象的id进行比较，如果它是true，则给HTML带复选框，否则返回纯文本。我认为这就是你想要实现的目标。

这是一个Working fiddle，我认为这是你试图实现的目标

Answer 5

你不能在选项中添加标签。尝试将选项字体设置为font-family：＆＃34; myfontawesome＆＃34;，arial;并添加特殊字符而不是css替换。

Answer 6

我认为您的问题在于，您无法设置值或将html添加到下拉选项中的项目，就像您尝试的那样......它是纯文本。

newtext = actual_value + "wat";

See how your fiddle works when I remove the html and just add plaintext：

我也建议您查看here。

Answer 7

如果要显示图标，则需要定位HTML元素并插入HTML而不是TEXT。非常喜欢这样：

$(document).ready(function () {

    $("#sel").select2();

    $("#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>";
        $("#s2id_sel").find('.select2-chosen').html(newtext);
    });
});

请参阅http://jsfiddle.net/S9tE3/

BUT。我可以看到，您需要定位的HTML元素是$（＆＃39; s2id _ ＆＃39; + [当前元素ID ]）。 s2我猜SELECT2和id_。所以你的选择是id =＆＃34; sel＆＃34;，这意味着$('s2id_sel')。另请注意，您需要找到选择的那个。它足够方便，有一个＆＃34; .select2-selected＆＃34;这使得它很容易定位的类。

这不会改变价值，只有LOOK ，我认为你正在尝试做的事情。

希望有所帮助

Answer 8

替换此代码

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

并输入此代码

<select id="sel" style="width: 100%">
       <option value="1">Hello</option>
       <option value="2">Friends</option>
       <option value="3">Stackoverflow</option>
  </select>

Answer 9

我更改了一些代码来检查您的数据图标

   $("#addok").click(function() {
        actual_value = $("#sel").find(':selected').text();
       if($("#sel").find(':selected').data('icon') == '1')  
         {
           alert("asd");
           return}

设置data-icon = 0以防止它从format_select2_icon生成图标并删除图标。

 if($("#sel").find(':selected').data('icon') == '1')  {
          $("#sel").find(':selected').data('icon','0') ;
         $(".select2-chosen").text(actual_value).change();
        }

请参阅：http://jsbin.com/nasixuro/18/edit

希望对你有所帮助。

Answer 10

使用 fontawesome图标，您可以使用以下内容：

.select2-results__option[aria-selected=true]::before {
    content: "\f0c9";
    font: normal normal normal 14px/1 FontAwesome;
    color: rbg(255,0,0);
}

每个图标都有相应的文字：http://fortawesome.github.io/Font-Awesome/cheatsheet/

或者如果您有gif，例如，只需将图像作为CSS背景，就可以这样做：

.select2-results__option[aria-selected=true] {
    background: url('path/to/image.gif') no-repeat 10px 10px;
}

结果如下：

Answer 11

使用Bootstrap Glyphicons，您可以将以下内容添加到CSS中

.select2-results__option[aria-selected=true]::after {
    font-family: "Glyphicons Halflings";
    content: "\e013";
}

和glyphicon-ok将附加到每个所选项目。

在Bootstrap cheatsheet中查找图标代码。

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

11 个答案: