Check how to configure custom styling (here: items that starts with 'a' are rose) to work with dynamic effects (like hover), states (like selected) and dinamic api (like "disable option" and "disable compent")
Configuration:
$("select[multiple='multiple']").bsMultiSelect({
customChoiceStylings : function(choiceDom, option){
if (option.text.startsWith("A") || option.text.startsWith("a"))
{
choiceDom.choiceElement.style.backgroundColor = 'HotPink';
return {
// updateHoverIn, updateDisabled, updateSelected, updateHighlighted are possible
updateHoverIn(state){
if (state.isHoverIn){
choiceDom.choiceElement.style.setProperty("background-color", "Pink", "important");
} else {
choiceDom.choiceElement.style.setProperty("background-color", "HotPink");
}
}
}
}
},
customPickStylings : function(pickDom, option){
if (option.text.startsWith("A") || option.text.startsWith("a"))
{
pickDom.pickContentElement.style.backgroundColor = 'HotPink';
var setBackground = function(state){
if (state.isComponentDisabled) {
pickDom.pickContentElement.style.setProperty("background-color", "transparent");
} else {
if (state.isOptionDisabled){
pickDom.pickContentElement.style.setProperty("background-color", "Pink");
} else {
pickDom.pickContentElement.style.setProperty("background-color", "HotPink");
}
}
}
return {
updateDisabled(state){
setBackground(state)
},
updateComponentDisabled(state){
setBackground(state)
}
}
}
}
});