BsMultiSelect API Demo - with custom styling items

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")

Two synchronized multiselects

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)
                                }
                            }
                        }
                    }
                });