在选项文本中添加 html img 标签答案

【问题标题】：Add html img tag in option text在选项文本中添加 html img 标签
【发布时间】：2018-12-23 19:18:14
【问题描述】：

有没有办法将 img 标签放在 html 选项的文本中？例如我需要这样的东西：

<select>
  <option value="1"> Text1<img src="foto.png"> </option>
  <option value="2"> Text2<img src="foto.png"> </option>
</select>

【问题讨论】：

在标题中你想添加<img>，在描述中你想添加<a>，再次在示例中你想添加<img>…o__0顺便说一句，你只是想显示一张图片为了视觉效果..？
使用纯 html 是不可能的...使用 javascript 是这样的，就像在这个主题中一样：Dropdown select with images

标签： html forms

【解决方案1】：

option 不能有任何子元素，包括 img。

HTML5 <option> spec 说以下 （强调我的）：

如果第一个参数不是空字符串，则新对象必须有一个 Text 节点作为其唯一的子节点，其数据是该参数的值。否则，它必须没有孩子。

【讨论】：

此链接已失效，我无法使用子 img 标签。
@khaverim 先前链接的规范说孩子img 不起作用。我更新了链接并添加了报价。
选项标签是守夜人的成员

【解决方案2】：

只有 FireFox 浏览器支持 Select options 上的背景图片：

test.html

<select id="test_select">
  <option>test1</option>
  <option>test2</option>
</select>

style.css

select#test_select option[value="test1"]   { background-image:url(test1.png);   }
select#test_select option[value="test2"] { background-image:url(test2.png); }

或者你可以使用 Jquery Selector 来显示图片。http://api.jqueryui.com/selectable/

【讨论】：

【解决方案3】：

我们可以通过jQuery在option标签内添加图片，并且只能在firefox中！

看这里：http://jsfiddle.net/L8s6spp4/1/

HTML：

This code Only works in Firefox.
<br/>
<select id="myselect">
  <option value="_none"> - Select One - </option>
  <option value="asterisk">asterisk</option>
  <option value="plus">plus</option>
  <option value="euro">euro</option>
</select>

jquery：

(function($) {
  $(document).ready(function() {
    $('#myselect option').each(function() {
      $(this).html('<img src="http://jsfiddle.net/img/logo.png">' + $(this).html());
    })
  });
})(jQuery);

【讨论】：

【解决方案4】：

您可以使用 fontAwesome，显示一些“img”。例如，使用  可以显示一个复选框图像。有总比没有好。

【讨论】：