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

Question

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

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

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

现在，如果onlyslave属性为true，则我希望文本颜色为红色。 如果为假，则应保持黑色。 我已经知道如何使用以下方法将文本设置为红色：

.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

Answer 2

这是一个有效的小提琴 ，它显示了如何完成您所要求的。 作为前面提到的答案，您需要使用select2的templateResult功能。 Select2通过隐藏原始选择和构建并显示自定义版本来工作。 此自定义版本不具有原始选择中的onlyslave属性，这就是CSS选择器无法将其定位的原因。

HTML

<select class="js-example-basic-single" name="state">
  <option onlyslave="True">test</option>
  <option>test 2</option>
</select>

的JavaScript

function formatState (state) {
  if (!state.id) {
    return state.text;
  }

  var $state
  if(state.element.attributes.onlyslave && state.element.attributes.onlyslave.value == "True"){
    $state = $('<span class="redtext">'+ state.text+ '</span>');
  }

else {
  $state = $('<span>'+ state.text+ '</span>');
 }
  return $state;
};


$('.js-example-basic-single').select2({
  templateResult: formatState
});