select2 动态更改选择选项图标答案

【问题标题】：select2 change select option icon dynamicallyselect2 动态更改选择选项图标
【发布时间】：2021-05-06 14:56:55
【问题描述】：

我将 select2 用于自定义选择框。但我无法更改选择选项图标。是否可以使用 jQuery 动态更改图标？

我在 Dom 中找到图标 ...

<span class="select2-item"><i class="ico-status-pending"></i> <span>Pending</span></span>

我的html ..

<div class="aside-head__status-item">
    <div class="select2-wrap">
        <select class="select2-img" data-width="100%">
            <option value="ico-status-pending" selected>Pending</option>
            <option value="ico-status-open">Open</option>
            <option value="ico-status-resolved">Resolved</option>
            <option value="ico-status-close">Closed</option>
        </select>
    </div>
</div>

【问题讨论】：

不清楚你能准确地说你想要什么..你想改变什么图标？？
法国人，如果可能的话，我只想拥有更改选项图标的机制。我的页面使用 ajax 动态更改，我将选项属性设置为活动但活动图标不会更改任何新的。
你想用正确的图标类触发 select2 吗？
您应该为此使用 select2 API - 使用 template:Selection - 请参阅 select2.org/selections#templating
如何将图像放入下拉列表？您提供的代码没有任何图像/图标。

标签： html jquery jquery-select2

【解决方案1】：

不确定我是否理解正确

如果您想动态更改图标，可以使用所需的图标类触发 select2：

例如：

$('.select2-img').val("ico-status-resolved").trigger("change")

如果你想直接在 DOM 中使用选择器，你可以使用：

   $(".select2-item i").removeClass().addClass("ico-status-open");
   $(".select2-item span").text("Open");

当然，如果$(".select2-item") 不是唯一的，则解决方案会有所不同..

【讨论】：

法语，谢谢你的回答。我想选择元素 并将其更改为类名，例如“ico-status-resolved”为“ico-status-pending”。如何为它创建选择器？并获取下一个跨度并将文本 Pending 更改为 Open。
法语，谢谢你的回答。我会检查的。

【解决方案2】：

不确定我是否理解正确，您是指显示在选项菜单右上角的图标arrow down？

如果是这样，那么您可以这样更改：

$('.select2-img').select2();

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  background-image: url(https://www.iconninja.com/files/664/91/782/small-arrow-down-icon.png);
  background-color: transparent;
  background-size: contain;
  border: none !important;
  height: 20px !important;
  width: 20px !important;
  margin: auto !important;
  top: auto !important;
  left: auto !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<span class="select2-item"><i class="ico-status-pending"></i> <span>Pending</span></span>


<div class="aside-head__status-item">
  <div class="select2-wrap">
    <select class="select2-img" data-width="80%">
      <option value="ico-status-pending" selected>Pending</option>
      <option value="ico-status-open">Open</option>
      <option value="ico-status-resolved">Resolved</option>
      <option value="ico-status-close">Closed</option>
    </select>
  </div>
</div>

【讨论】：

【解决方案3】：

select2 提供了一个完全满足您要求的 API，而不是破解 select2 的 DOM 元素，templateSelection 选项。

您的原始代码没有说明图标是如何显示/生成的，只是 option 有一个 value= 似乎与您的图标相对应（图像也以不同的顺序显示它们）。

要设置选择选项后下拉菜单的显示方式，请使用：

$('.select2-img').select2({
  templateSelection: function(data, container) {
    if (data == null || !container) return null;
    return $("<i class='" + data.id + "'></i>");
  }
});

其中data.id = option 的value=

如果您返回一个 jQuery 对象，那么它将按原样输出，否则将使用 .text() 输出（因此删除任何 html）

【讨论】：

freedomn-m ，谢谢回答。我会检查的。