Обходной путь для добавления HTML-кода в значение параметра выбора ввода

Question

Как я могу добавить флаг из https://github.com/transferwise/currency-flags

<div class="currency-flag currency-flag-usd"></div>

в мои выбранные параметры ввода? Например, для долларов США это должно выглядеть следующим образом:

<option value="1"><div class="currency-flag currency-flag-usd"></div> USD</option>

, но кажется, что я не могу добавить HTML в текст.

Полный код моего выбранного ввода:

<select name="currency" class="select form-control" placeholder="Currency" required="" id="id_currency">
    <option value="">---------</option>
    <option value="1">USD</option>
    <option value="2">CAD</option>
    <option value="3" selected="">PLN</option>
</select>

Answer 1

вы можете добавить изображения некоторые вещи, как показано ниже. только если ваш раскрывающийся список должен использовать div , а не , выберите элемент

<div class="ct-topbar">
  <div class="container">
    <ul class="list-unstyled list-inline ct-topbar__list">
      <li class="ct-language">Language <i class="fa fa-arrow-down"></i>
        <ul class="list-unstyled ct-language__dropdown">
          <li><a href="#googtrans(en|en)" class="lang-en lang-select" data-lang="en"><img src="https://www.solodev.com/assets/google-translate/flag-usa.png" alt="USA"></a></li>
          <li><a href="#googtrans(en|es)" class="lang-es lang-select" data-lang="es"><img src="https://www.solodev.com/assets/google-translate/flag-mexico.png" alt="MEXICO"></a></li>
          <li><a href="#googtrans(en|fr)" class="lang-es lang-select" data-lang="fr"><img src="https://www.solodev.com/assets/google-translate/flag-france.png" alt="FRANCE"></a></li>
          <li><a href="#googtrans(en|zh-CN)" class="lang-es lang-select" data-lang="zh-CN"><img src="https://www.solodev.com/assets/google-translate/flag-china.png" alt="CHINA"></a></li>
          <li><a href="#googtrans(en|ja)" class="lang-es lang-select" data-lang="ja"><img src="https://www.solodev.com/assets/google-translate/flag-japan.png" alt="JAPAN"></a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

здесь работает демо