Javascript 如何将图标附加到select2中的选定项？

我正在使用fontawesome，我想在所选项目中添加或删除图标。 所以我这样做了： （感谢）

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

    });
});

$（文档）.ready（函数（）{
功能格式\u选择2\u图标（opti）{
if（！opti.id）返回opti.text；//optgroup
如果（$（可选元素）.data（'icon'）=“1”）{
返回opti.text+“”；
}否则{
返回opti.text；
}
}
$（“#选择”）。选择2({
转义标记：函数（m）{return m；}，
formatResult:format_select2_图标，
formatSelection:format_select2_图标
});
$（“#添加OK”）。单击（函数（）{
实际_值=$（“#选择”）.find（'：selected'）.text（）；
if（实际值indexOf（“”>-1）{
警报（“asd”）；
返回；
}
newtext=实际_值+“”；
$（“#sel”）.find（'：selected'）.text（newtext.change（）；
});
$（“#removeok”）。单击（函数（）{
实际_值=$（“#选择”）.find（'：selected'）.text（）；
indexOk=实际值。indexOf（“”）；
如果（indexOk>-1）{
newtext=实际值。子字符串（0，indexOk）；
$（“#sel”）.find（'：selected'）.text（newtext.change（）；
返回；
}
});
});

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

格式化的选项），不会删除图标，如果您尝试添加图标，则会在现有图标中追加另一个图标

---

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

我想你的问题是，你不能像你尝试的那样，为下拉选择中的项目设置值样式或添加html…这是纯文本

newtext = actual_value + "wat";

:

---

我也可能建议您查看。

您不能在选项中添加标签。

---

尝试将选项字体设置为字体系列：“myfontawesome”，arial；并添加特殊字符，而不是css替换。

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

$（文档）.ready（函数（）{
$（“#选择”）。选择2（）；
$（“#添加OK”）。单击（函数（）{
$（“#选择”）。选择2({
//formatResult:格式
格式选择：格式
//转义标记：函数（m）{return m；}
});
});
});
函数格式（状态）{
如果（！state.id）返回state.text；
返回“”+state.text；
}

---

如果要显示图标，需要以HTML元素为目标并插入HTML而不是文本。大致如下：

$(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);
    });
});

$（文档）.ready（函数（）{
$（“#选择”）。选择2（）；
$（“#添加OK”）。单击（函数（）{
实际_值=$（“#选择”）.find（'：selected'）.text（）；
if（实际值indexOf（“”>-1）{
警报（“asd”）
返回
}
newtext=实际_值+“”；
$（“#s2id_sel”）.find（'.select2 selected'）.html（newtext）；
});
});

看

但是。据我所见，您需要针对的HTML元素是$（'s2id.'+[当前元素id]）。s2我想对于SELECT2和id\ux。所以您的选择是id=“sel”，意思是

$（'s2id\u sel'）

。还需要注意的是，您需要找到所选的一个。很方便，它有一个“.select2 selected”类，这使得它有点容易定位

这不会改变值，只会改变外观，我认为这正是您想要做的

---

希望这会有所帮助

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

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

只需在中定义一个escapeMarkup函数，就可以使其正常工作 选择2选项，此功能必须返回接收到的相同数据 作为输入参数，不作任何更改

您所需要的只是：

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

下面是一个工作示例：

在第二个文件中，对选择2.js文件进行一些小的更改

在检查了select2.js之后，我发现了更新文本的功能，但是有一个小问题，select2.js插件逃逸 html以防止js注入，从而使其按预期工作 要避免转义html，请使用jquery api中的.html（）函数 插入html而不是中使用的.append（）函数 更新选择功能select2.js

下面是我所说的函数：

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

致：

在我看来，这是一个肮脏的解决办法

对于删除操作，请使用以下代码：

$("#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;
    }

});

$（“#移除OK”）。单击（函数（）{
实际_值=$（“#选择”）.find（'：selected'）.text（），
indexOk=实际值。indexOf（“”）；
如果（indexOk>-1）{
newtext=实际值。子字符串（0，indexOk）；
$（“#sel”）.find（'：selected'）.text（newtext.change（）；
返回；
}
});

只需在选项中将

/i>
栈溢出

---

您可以在此处进行测试：

替换此代码

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

你好
朋友
栈溢出

您不需要手动执行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
});

var图标_checked=”“；
函数格式（opt）{
var selection=this.element.select2（“val”）；
如果（opt.id==选择）{
返回opt.text+选中的图标；
}
返回opt.text；
}   
$（“#选择”）。选择2({
formatResult:格式
});

基本上

this.element

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

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

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

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

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

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

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