着色"dropdown itmes"和"selected picks"

Question

我想根据数据属性中存储的颜色为我选择的标签着色(为"下拉itmes"和"所选选择"着色(，可以吗？

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