javascript - 将有选项显示图像而不是 Bootstrap 多选中的选定文本

Question

这里是否有任何选项可以默认显示图像。

代码:

 <select id="example-post" style="width:120px;!important;" class="footerSelect" name="multiselect[]" multiple="multiple">
                                            <option value="1">test</option>
                                            <option value="2">test1</option>
                                            <option value="3">test2 </option>             

 $('.multiselect-selected-text').text('Options');

这里我不想显示选项而是默认显示图像。

Answer 1

试试这个...

<div class="pull-left">
    <div class="pull-right">
        <div class="btn-group">                 
                <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
                    <span>Actions</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li class="ok"><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li class="ok"><a href="#">Item 3</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item 5</a></li>

                </ul>
            </div>
    </div>
</div>

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.dropdown-menu li:nth-of-type(1) { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 3px 5px;
    padding-left: 5px;
}

.dropdown-menu li:nth-of-type(2) { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 3px 5px;
    padding-left: 5px;
}