目前正在尝试在旧应用程序中使用 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,但可能会降级。
最佳答案
正如我在评论中提到的,您需要使用 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
关于javascript - 无法使用自定义属性更改 Select2 下拉菜单的字体颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47552512/