jQuery 在 <select> <option> 中添加图像的最佳方式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39609867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The best way to add images in <select> <option>
提问by Jan Kowalski
What is actually the best way to add images in <select> <option>?
I need to add country flags in my list. I use AngularJS and jQuery.
Cross-browser is important for me. I try background-imageand few old jquery plugins, but it dosen't works in Chrome.
添加图像的最佳方法是<select> <option>什么？我需要在我的列表中添加国旗。我使用 AngularJS 和 jQuery。跨浏览器对我来说很重要。我尝试了background-image一些旧的 jquery 插件，但它在 Chrome 中不起作用。
So how can I add image in list items? Any help will be appreciate.
那么如何在列表项中添加图像？任何帮助将不胜感激。
回答by shamim khan
I think this plugin will be help you jquery-image-dropdown
我认为这个插件会帮助你 jquery-image-dropdown
or
或者
You can do your own follow this article Icons for Select Menu Options in HTML/CSS
你可以自己按照这篇文章在 HTML/CSS 中选择菜单选项的图标
Or
或者
Here is another Demo
这是另一个演示
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$(".dropdown img.flag").toggleClass("flagvisibility");
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
.desc { color:#6b6b6b;}
.desc a {color:#0092dd;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#5d4617;}
.dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
.dropdown dt a {background:#e4dfcb url('http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/arrow.png') no-repeat scroll right center; display:block; padding-right:20px;
border:1px solid #d4ca9a; width:150px;}
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
.dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;} <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<dl id="sample" class="dropdown">
<dt><a href="#"><span>Please select the country</span></a></dt>
<dd>
<ul>
<li><a href="#">Brazil<img class="flag" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/br.png" alt="" /><span class="value">BR</span></a></li>
<li><a href="#">France<img class="flag" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/fr.png" alt="" /><span class="value">FR</span></a></li>
</ul>
</dd>
</dl>
<span id="result"></span>回答by Eric Amshukov
回答by wpcoder
HTML & CSS together:
HTML 和 CSS 一起：
<select>
<option style="background-image:url(usa.png);">USA</option>
<option style="background-image:url(uk.png);">UK</option>
<option style="background-image:url(france.png);">France</option>
</select>
HTML
HTML
<select id="country">
<option>USA</option>
<option>UK</option>
<option>France</option>
</select>
CSS
CSS
select#country option[value="USA"] { background-image:url(usa.png); }
select#country option[value="UK"] { background-image:url(uk.png); }
select#country option[value="France"] { background-image:url(france.png); }
