Select2 样式属性未拾取

Question

我正在尝试以编程方式设置某些 select2 选项的背景颜色。由于某种原因，它似乎不起作用。我根本没有看到背景颜色是红色的。我真正想做的是设置select2呈现为li的背景颜色，并且是formatText()函数中span标签的父级。

编辑：

你在这里看到的那些选项是黄色的，我希望整行而不是只是文本是黄色的。

我还想在我的家庭下拉菜单中设置各个行的样式，以使其与我的产品下拉菜单中的颜色保持一致。

我有两段代码我认为应该这样做。这是小提琴 - https://jsfiddle.net/jamiebrs/8axy7123/

  const productsConfig = {
  width: "100%",
  theme: 'bootstrap4',
  placeholder: "Select item",
  allowClear: true,
  templateSelection: formatText,
  templateResult: formatText, 
  data: dataitems2, 
   escapeMarkup: function(m) {
      return m;
   }
};

function formatText (icon) {
if(icon.badge == undefined){
    return  $('<span>' + icon.text + '</span>');
} else {
  return  $('<span><span class="badge" style"background-color:red">'+ icon.badge.length + '</span> ' + icon.text + '</span>');
}
    
};

和....

$('#products').select2(
    Object.assign({},
    productsConfig,
    {data: null}
  )
 );


$('#fam').on('change', function() {
  // get selected value from the #fam select2
  const selected = $(this).val();
  // get the new products config (products config + data options)
  const newProductsConfig = Object.assign({},
    productsConfig,
    {data: productOptions[selected]}
  );

  // destroy the existing products select2 and re-initialize
  $('#products').empty().select2('destroy').select2(newProductsConfig);
  $('#products').val(null).trigger('change')
});

Answer 1

我正在添加另一个答案，因为我认为我的第一个答案对于您最初的问题是可行的并解决了您遇到的错误，并且这个答案可以满足您的实际需求。您的主要问题是您想更改选项的背景颜色，但下拉容器是在打开时动态生成的。这使得改变样式变得很棘手。但是，您可以稍微破解 select2 配置中的 theme 选项。通常，当您设置theme 选项时，它会将该字符串添加到以select2-container-- 为前缀的下拉类中。例如，如果您设置此配置：

$('#example').select2({theme: 'bootstrap4'});

然后，每当您打开下拉列表时，主 select2 容器将具有 select2-container--bootstrap4 类。它只是将您为theme 设置的任何内容附加到select2-container--，这意味着我们可以在配置中添加自己的类，如下所示：

$('#example').select2({theme: 'bootstrap4 my-custom-class'});

然后每当您打开下拉菜单时，主 select2 容器将具有类 select2-container--bootstrap4以及类 my-custom-class。

了解这一点后，您可以提前为列表项创建任何您想要的样式：

#select2-fam-results li:nth-child(1),
.select2-container.bg-red li {
  background-color: red;
}

#select2-fam-results li:nth-child(2),
.select2-container.bg-yellow li {
  background-color: yellow;
}

编辑说明：

请注意，我还为您的家庭列表元素添加了匹配样式，例如 #select2-fam-results li:nth-child(1) 和 #select2-fam-results li:nth-child(2)。由于您在 Family <select> 元素上提供了 id 或 fam，因此动态生成的 <ul> 列表将始终具有对应于 id select2-fam-results 的 id。由于您正在对 nth-child 索引进行硬编码，因此您必须在这里小心一点，但是如果您可以合理地确定 Family 选项的顺序将如何显示，那么您可以安全地执行此操作。

结束编辑说明

现在您需要做的就是在选择Family 时动态更新您的主题。让我们修改productOptions，使其包含您的数据和您想要的主题：

const productOptions = {
  dataitems1: {data: dataitems1, theme: 'bg-red'},
  dataitems2: {data: dataitems2, theme: 'bg-yellow'},
};

现在，在您的 #fam 更改活动中，您所要做的就是将该主题添加到您现有的主题中：

$('#fam').on('change', function() {
  /* ... */
  const options = productOptions[selected];

  // get the new products config (products config + data options + theme)
  const newProductsConfig = Object.assign({}, productsConfig, {
    data: options.data,
    theme: `${productsConfig.theme} ${options.theme}`,
  });
  /* ... */
});

这使您可以根据您选择的系列灵活地更改产品的背景颜色。

注意：在您的 productsConfig 定义中，您还必须将 data: dataitems2 更改为 data: dataitems2.data 或完全删除该行，因为它实际上并没有被使用。

Answer 2

您只是有一个错字，因为您缺少样式声明上的= 符号。在您的 else 语句中，您应该将 HTML 从

<span class="badge" style"background-color:red">

到

<span class="badge" style="background-color:red">

我还可以创建一个新的 CSS 类并使用它，而不是使用硬编码的样式。例如，您可以像这样定义一个 CSS 类：

.badge-highlight { /* name this whatever you want */
  background-color: red;
}

然后更改您的 JavaScript 以包含此 HTML：

<span class="badge badge-highlight">