Select2 样式属性未拾取

Question

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

编辑：

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

我还想为“家庭”下拉列表中的各行设置样式，以与它们在“产品”下拉列表中的颜色相一致。

我有两段代码我认为应该这样做。这是 Fiddle - 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

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

更改为

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

到

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

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

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

然后改变你的 JavaScript 来包含这个 HTML:

<span class="badge badge-highlight">

Answer 2

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

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

然后无论何时打开下拉菜单，主 select2 容器都会有 class select2-container--bootstrap4。它只是将您为 theme 设置的任何内容附加到 select2-container--，这意味着我们可以在配置中添加我们自己的 class，如下所示：

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

然后每当您打开下拉菜单时，主 select2 容器将包含 class select2-container--bootstrap4 以及 class 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> 元素上给出了 fam 的 id，因此 dynamically-generated <ul> 列表将始终具有对应的 ID select2-fam-results。由于您正在对 nth-child 索引进行硬编码，因此您在这里必须要小心一些，但是如果您可以合理地确定 Family 选项的顺序将如何出现，那么您就可以安全地执行此操作。

结束编辑注释

现在您需要做的就是在 Family 被 selected 时动态更新您的主题。让我们修改 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}`,
  });
  /* ... */
});

这使您可以灵活地更改产品的背景颜色，具体取决于您 select。

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

Select2 样式属性未拾取

Select2 style attribute not picking up

javascript

forms

jquery

jquery-select2