如何在 HTML 选择元素中仅显示选定选项的图像答案

【问题标题】：How to display only the Image of a Selected Option in HTML Select Element如何在 HTML 选择元素中仅显示选定选项的图像
【发布时间】：2021-02-21 13:08:44
【问题描述】：

我有以下选择元素，其中每个选项元素由img 和span 组成，如下所示

<select>
  <option>
  <img src="country-flag"/><span>CountryName</span>
  </option>

  <option>
  <img src="country-flag"/><span>CountryName</span>
  </option>

  <option>
  <img src="country-flag"/><span>CountryName</span>
  </option>
<select>

现在当用户选择一个国家时，我如何在选择提示上只显示国家标志而忽略文本

【问题讨论】：

你不能用 html 选择来做到这一点，有 1000 个插件可以做到这一点。
我想创建一个语言选择器吗？
@AdamP。是的。但只有国家标志应该显示在选择前后的选择提示上
在发表之前显然没有进行简单的研究
github.com/…

标签： html css

【解决方案1】：

您只需要从this答案复制代码并从选项中删除语言名称文本

【讨论】：

【解决方案2】：

很遗憾，您不能在选择元素中使用 img 标签。

您可以使用 javascript plain/library 来模仿 select 元素，或者对于像国家标志这样简单的东西，您可以在 select ->option 元素中使用表情符号。

<select name="countries">
    <option value="Plain flag">??</option>
    <option value="DE">??&emsp;Germany</option>
    <option value="FR">??&emsp;France</option>
    <option value="some emoji">? cool right?</option>
</select>

您可以在线搜索表情符号，然后将其复制并粘贴到您的脚本上。例如，您可以使用这个免费网站：https://getemoji.com/

【讨论】：