javascript - 将 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 而不是 select 元素

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

这里正在工作demo