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

Posted 2023-05-07

【中文标题】如何将图标附加到select2中的选定项目？

【英文标题】：How to append an icon to selected item in select2?

【发布时间】：2014-07-01 16:11:05

【问题描述】：

我正在使用 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">***</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 和*** 项目中添加或删除图标，但在Friends（即用formatSelection 和formatResult 格式化的选项）中，不会删除图标，如果您尝试添加图标，则会将另一个图标附加到现有图标。

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

【参考方案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);

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

对于 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;
    

);

【讨论】：

既然CSS可以做到，为什么还要使用JS！？我发现它相当复杂，它在浏览器中使用了更多资源。

【参考方案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">***</option>
</select>

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

【讨论】：

这个 jsbin 不再起作用，因为 select2 js 和 css 的源文件是 404s。您能否使用仍为这些版本提供服务的 CDN 进行更新？

【参考方案3】：

你可以使用 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

【讨论】：

谢谢！但我只需要选择的项目。你有什么想法吗？

我认为 Fares M. 有最好的解决方案

【参考方案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，我想这就是你想要实现的目标

【参考方案5】：

您不能在选项中添加标签。 尝试将选项字体设置为 font-family: "myfontawesome", arial;并添加特殊字符而不是 css 替换。

【参考方案6】：

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

newtext = actual_value + "wat";

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

我也可能建议查看here。

【参考方案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/

但是。据我所知，您需要定位的 HTML 元素是 $('s2id_'+[current element id])。 s2 我猜是 SELECT2 和 id_。所以你的选择是 id="sel"，意思是$('s2id_sel')。另请注意，您需要找到选择了哪一个。它很方便，有一个“.select2-chosen”类，这使得它很容易定位。

这不会改变价值，只是 LOOK，我认为这正是你想要做的。

希望有帮助

【参考方案8】：

替换此代码

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

并输入此代码

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

【讨论】：

你能解释一下你的答案吗？正如目前所写的，尚不清楚这个小改动如何帮助解决 OP 的问题。

【参考方案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

希望对你有所帮助。

【参考方案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;

结果如下：

【参考方案11】：

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

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

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

在Bootstrap cheatsheet 中查找图标代码。