How to make a list of countries with flags using bootstrap?

Question

Bootstrap

Hello.
I am using this plugin . But in place of elem I need to insert the name of the countries with flags, for example Example 4 . But it's a dropdown menu, and I just want a list.
It turned out something like this:

<section id="select">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="select_countries">
                    <select role="option" id="public-methods">
                        <option><a tabindex="-1" href="#" data-option="" data-flags="true"></a></option>
                        <option><a tabindex="-1" href="#" data-option="AF" data-flags="true"><i class="glyphicon bfh-flag-AF"></i>Afghanistan</a></option>
                        <option><a tabindex="-1" href="#" data-option="AL"><i class="glyphicon bfh-flag-AL"></i>Albania</a></option>
                   </select>
                </div>
            </div>
        </div>
    </div>
</section>

And in the browser:

<ul class="ms-list" tabindex="-1">
     <li class="ms-elem-selectable ms-selected" id="0-selectable" style="display: none;"><span style="display: none;"></span></li>
     <li class="ms-elem-selectable" id="-884569212-selectable"><span style="display: none;">Afghanistan</span></li>
</ul>

The plugin changed everything.

Tell me please, how can I be?

Answer 1

With this plugin, without altering its internal logic, there is no way.
You should look at the source before asking a question. There, any html in the options is hard cut, even if they are dynamically set.
Plus, custom markup is generated according to data from the native (hidden) select. And in the native select, only text is allowed in the options, no html (here the browser itself cuts during the construction of the DOM).