首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >给"dropdown itmes“和"selected picks”着色

给"dropdown itmes“和"selected picks”着色
EN

Stack Overflow用户
提问于 2020-06-04 18:58:30
回答 1查看 71关注 0票数 1

我想根据数据属性中存储的颜色给我选择的标签上色(给"dropdown itmes“和"selected picks”上色),可以吗?

EN

回答 1

Stack Overflow用户

发布于 2020-06-08 06:18:18

对于版本1.1.9,请使用customChoiceStylingscustomPickStylings

代码语言:javascript
运行
复制
$("#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';
                        }
                    }
                });
代码语言:javascript
运行
复制
<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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62192954

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档