javascript - 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

我正在添加另一个答案，因为我认为我的第一个答案对于您最初的问题是可行的并且解决了您遇到的错误，并且这个答案可以满足您的实际需求。您的主要问题是您想更改选项的背景颜色，但下拉容器是在打开时动态生成的。这使得更改样式变得棘手。但是，您可以稍微破解 theme select2 配置中的选项。通常，当您设置 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) .因为你给了一个id的 fam关于您的家人 <select>元素，动态生成的 <ul> list 总会有 id 对应的 id select2-fam-results .你在这里必须小心一点，因为你正在对 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或完全删除该行，因为它实际上并未被使用。