Javascript 选择2样式属性不拾取

我试图以编程方式设置一些select2选项的背景色。由于某种原因，它似乎不起作用。我根本看不到背景色是红色。实际上，我要做的是为select2呈现为li的内容设置背景色，并且它是

formatText（）

函数中span标记的父项

编辑：

您在这里看到的选项是黄色的，我希望整行而不仅仅是文本是黄色的

我还想在“我的族”下拉列表中设置各个行的样式，以与“我的产品”下拉列表中这些行的颜色相对应

我有两段代码，我认为应该这样做。这是小提琴-

---

您只是有一个打字错误，您缺少样式声明上的

=

符号。在

else

语句中，您应该将HTML从

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

然后更改JavaScript以包含以下HTML：

<span class="badge badge-highlight">

---

我添加了另一个答案，因为我认为我的第一个答案对于您的初始问题是可行的，并且解决了您的错误，并且这个答案符合您的实际需要。您的主要问题是希望更改选项的背景色，但下拉容器在打开时会动态生成。这使得更改样式变得很棘手。但是，您可以稍微修改select2配置中的

主题

选项。通常，当您设置

主题

选项时，它会将该字符串添加到以

选择2容器--

为前缀的下拉类中。例如，如果设置此配置：

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

然后，每当您打开下拉列表时，主select2容器将具有类

select2容器--bootstrap4

。它只是将您为

主题设置的任何内容附加到
选择2容器--
，这意味着我们可以在配置中添加自己的类，如下所示：

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

然后，每当您打开下拉列表时，主select2容器将包含类
select2容器--bootstrap4
，以及类
my custom class

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

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

#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）
。由于您在家庭
元素上提供了
fam
的
id
，因此动态生成的
列表将始终具有id对应的id
select2 fam results
。在这里您必须小心一点，因为您正在硬编码第n个子索引，但是如果您可以合理地确定族选项的顺序将如何显示，那么您可以安全地执行此操作

结束编辑注释

现在，您所需要做的就是在选择
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
或删除该行，因为它实际上没有被使用。
。在修正了打字错误后，我让它工作了，但不是我试图做的那样。如果你看小提琴，它会显示带有黄色背景的“选项”，select2所做的是在浏览器中检查代码时插入一个标记。我基本上想要抓取那个标签并给它一个背景色，这样它看起来就像整个选项，而不仅仅是文本本身有一个背景色。我正在考虑使用parent（）函数，但我不太明白该怎么做。我编辑了OP，试图更清楚地了解我要做什么。谢谢，我会看一看的。对不起，我刚刚回到这个话题，上周太疯狂了。成功的繁荣。最后一个问题，我现在如何根据具体的族将族选项设置为黄色和红色？更新了您的问题和我基于此评论的答案，看一看-它涉及更新您的CSS定义。是的，这很有效。谢谢你的帮助。我认为你的答案是正确的，并投了你一票
$('#example').select2({theme: 'bootstrap4 my-custom-class'});

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

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

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

$('#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}`,
  });
  /* ... */
});