How to Add Image Icon to Bootstrap Select Options

Question

Just wonder if it is possible to add Icon/Image to Bootstrap Select Options.
I already tries this by adding background-image to options at HERE

<select class="span2">
            <option>1</option>
            <option style="background-image:url(slider-dot.png);">2</option>
            <option>3</option>
</select>

But it is not working! Can you please let me know if this is possible? Thanks

Solution

As far as I know you can't add icons to option elements using built-in bootstrap settings. However, there's a plugin built for bootstrap meant to do this functionality, also adding additional customization options to bootstrap select components. It's called bootstrap-select.

The icons used for this plugin are directly loaded from the Glyphicons provided by bootstrap.

• The Git Project can be found here: http://silviomoreto.github.io/bootstrap-select/
• You can also find a live demo of the functionality in here: http://silviomoreto.github.io/bootstrap-select/

EDIT: see link for jsFiddle example: http://jsfiddle.net/YW8MV/5/

The relevant JavaScript is this:

$('.selectpicker').selectpicker({
    style: 'btn-primary',
    showIcon: true,
    title: 'select test'
});

Comments

[Juan Carlos Alpizar Chinchilla]

I can't post the fiddle link in the main answer due to lack of reputation, so here it is: jsfiddle.net/YW8MV/5