着色“下拉项目”和“选定的选择”

Question

我想根据存储在数据属性中的颜色为我选择的标签着色（着色“下拉项目”和“选定的选择”），可以吗？

Answer 1

对于 1.1.9 版，请使用 customChoiceStylings 和 customPickStylings

$("#mySelect").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';
                        }
                    }
                });

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@dashboardcode/bsmultiselect@1.1.9/dist/js/BsMultiSelect.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" crossorigin="anonymous">

<div class="form-group m-2">
  <label for="mySelect">BsMultySelect</label>
  <select id="mySelect" class="custom-select" name="status2" multiple='multiple'>
    <option value="C0" selected>Asia</option>
    <option value="C1" selected>Europe</option>
    <option value="C2">Australia</option>
    <option value="C3">America</option>
    <option value="C4">Africa</option>
  </select>
</div>

如果您也有兴趣管理“组件禁用”和“选项禁用”状态，请查看高级示例： https://dashboardcode.github.io/BsMultiSelect/snippetCustomStyling.html