select2 动态更改 select 选项图标

Question

我正在使用 select2 作为自定义 select 框。但我无法更改 select 选项图标。是否可以使用 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>

Answer 1

不确定我是否理解正确，您是指显示在选项菜单右上角的图标 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>

Answer 2

不确定我是否理解正确

如果你想动态改变图标，你可以用所需的图标触发 select2 class:

例如：

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

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

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

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

Answer 3

select2 没有砍掉 select2 的 DOM 元素，select2 提供了完全符合您要求的 API templateSelection 选项。

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

要设置在您 select 一个选项后如何显示下拉菜单，请使用：

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

其中 data.id = option 的 value=

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

select2 动态更改 select 选项图标

select2 change select option icon dynamically

html

jquery

jquery-select2