javascript - 无法使用自定义属性更改 Select2 下拉菜单的字体颜色

Question

目前正在尝试在旧应用程序中使用 Select2。我可以成功激活旧的下拉菜单并将其变成 Select2 下拉菜单。一切正常。下拉列表已填满，相关功能仍在使用。但是，我正在尝试做一些更高级的事情。

在旧的下拉列表中，每个选项都有一个自定义属性。

<option onlyslave="True" ...> ...</option>

现在，如果 onlyslave 属性为真，我希望文本颜色为红色。如果它是假的，它应该保持黑色。我已经知道如何将文本设置为红色，使用这个:

.select2-results { 
  color: red;
}

这显然会将 Select2 下拉列表中的每个结果都变成红色。我以为添加一个属性 [onlyslave="true"] 会解决它，但事实并非如此。尽管屏幕后面的“旧”下拉菜单具有 False 和 Truth 选项，但以下代码段不会变成红色。大写的“真相”或“真相”在这里没有区别。

.select2-results[onlyslave="true"] { 
  color: red;
}

有人知道我该怎么做吗？我发现 Select2 文档有点乏味。我目前使用的是 Select2 4.0.5，但可能会降级。

Answer 1

正如我在评论中提到的，您需要使用 templateResult 属性来构建您的元素，并考虑 onlyslave 属性，例如

HTML

<select>
  <option onlyslave="True">Option 1</option>
  <option onlyslave="False">Option 2</option>
  <option onlyslave="False">Option 3</option>
</select>

CSS

.select2-results span[onlyslave="True"] { 
  color: red;
}

JavaScript

function formatState (state) {
  if(!state.element) return;
  var os = $(state.element).attr('onlyslave');
  return $('<span onlyslave="' + os + '">' + state.text + '</span>');
}

$(document).ready(function() {
    $('select').select2({
      templateResult: formatState
    });
});

Codepen 示例:https://codepen.io/anon/pen/gXByeK