Question

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

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

Answer 1

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

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

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

Answer 2

只有FireFox浏览器支持选择选项上的背景图像：

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

Answer 3

我们可以通过jQuery在选项标签内添加图像，只能在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);

Answer 4

您可以使用fontAwesome来显示一些'img'。例如，使用＆amp;＃xF046可以显示复选框图像。它总比没有好。

在选项文本中添加html img标记

4 个答案: