Question

我已经通过Bootstrap创建了一个多选。由于所选项目的颜色默认为蓝色。我在列表中有5个项目，我希望它们有5种不同的颜色。我怎么能这样做，非常感谢。

<select id="caseSelector" multiple="multiple"></select>

    $.each(casename, function (key, value) {
        $('#caseSelector')
         .append($('<option>', { value: key })
         .text(value));
    });
    $(document).ready(function () {
                $('#caseSelector').multiselect({
                    includeSelectAllOption: true,
                    enableFiltering: true,
                    buttonWidth: '140px'
                 });
            });

Answer 1

使用其值或键为每个选项分配一个类或ID。然后参考css中的类或ID。

我在JSFiddle https://jsfiddle.net/ebzj60o4/1/

上放了一个工作示例

<!-- Build your select: -->
<select id="caseSelector" multiple="multiple">
    <option class="blue" value="cheese">Cheese</option>
    <option class="red" value="tomatoes">Tomatoes</option>
    <option class="yellow" value="mozarella">Mozzarella</option>
    <option class="purple" value="mushrooms">Mushrooms</option>
    <option class="green" value="pepperoni">Pepperoni</option>
    <option class="orange" value="onions">Onions</option>
</select>

您还可以使用CSS伪类来设置不同状态的颜色。（悬停，活跃等）http://www.w3schools.com/Css/css_pseudo_classes.asp

希望有所帮助！欢呼声。

bootstrap multiselect选择的项目颜色

1 个答案: