Как сделать список стран с флагами с помощью bootstrap?

Question

[Artem Pavliienko]

Всем привет.

Я использую вот такой плагин. Но в место elem мне нужно вставит название стран с флагами, например Example 4. Но тут выпадающее меню, а мне нужен просто список.

Получилось как-то так:

<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>

А в браузере:

<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>

Плагин все переделал.



Подскажите пожалуйста, как мне быть?

Answer 1

[Сергей delphinpro]

С этим плагином без переделки его внутренней логики — никак.
Вы бы посмотрели исходник, прежде чем вопрос задавать. Там любой html в опциях жёстко вырезается, даже если их динамически задавать.
Плюс кастомная разметка генерится по данным из нативного (скрытого) селекта. А в нативном селекте в опциях допустим только текст, никакого html (тут уже браузер сам режет во время построения DOM).

Comments

[Artem Pavliienko]

А вы случайно не знаете альтернативный плагин?

[Сергей delphinpro]

Artem Pavliienko, нет