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

【问题标题】：Unable to change font color of Select2 dropdown with custom attributes无法使用自定义属性更改 Select2 下拉菜单的字体颜色
【发布时间】：2017-11-29 12:08:25
【问题描述】：

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

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

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

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

.select2-results { 
  color: red;
}

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

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

有人知道我怎么能做到这一点吗？我发现 Select2 文档有点乏味。我目前正在使用 Select2 4.0.5，但可能能够降级。

【问题讨论】：

看起来您可能需要使用 templateResult 模板功能来构建您的选项：select2.org/dropdown#templating

标签： javascript jquery css jquery-select2

【解决方案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

【讨论】：

非常感谢！跳过文档的那部分，我觉得很傻。其他部分的隧道视野太多。像魅力一样工作！
很高兴我能帮上忙 :)

【解决方案2】：

这是一个working fiddle，它显示了如何完成您所要求的。正如前面提到的答案，您需要使用 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
});

【讨论】：