jquery - 选择选项内的 HTML 文本未呈现

Question

我在 select 的选项中渲染了 html 标签select2，如下所示：

$('#select2colors').append($('<option>', {
      value: color,
      text: `<i class="fas fa-square" style="color: ${color}; width:100%;"></i>`
}));

$("#select2colors").select2({
   escapeMarkup: function(markup) {
    return markup;
}

这给我带来了这样的结果：

问题：现在我正在尝试做同样的事情，同样的逻辑，但没有append()部分。但是不起作用，我正在寻找一种方法来做到这一点，但我没有找到任何东西。我正在做的是这样的：

<select class="form-control form-control-sm" id="select2colors">
       @foreach($colors as $color)
        <option value="#{{ $color }}">
             {{ htmlentities("<i class='fas fa-square' style='color: #".$color."; width:100%;'></i>") }}
         </option>
      @endforeach
</select>

$("#select2colors").select2({
   escapeMarkup: function(markup) {
    return markup;
}

我以为它会起作用，但事实并非如此。只是正在消失，<i>根本没有被渲染。有谁知道我怎样才能做到这一点才能和以前一样？

我得到的是，HTML 没有呈现：

标签： jquerylaraveljquery-select2

Answer 1

我在启动时所做的是直接放入 HTML，我必须将 HTML 转换为纯文本，就像 @Mohamed-Yousef 评论一样。首先我使用htmlentities()但我需要的是html_entity_decode()，在这里解释：

<?php
$orig = "I'll \"walk\" the <b>dog</b> now";

$a = htmlentities($orig);

$b = html_entity_decode($a);

echo $a; // I'll &quot;walk&quot; the &lt;b&gt;dog&lt;/b&gt; now

echo $b; // I'll "walk" the <b>dog</b> now
?>