Html 将带有选项的图像放在下拉列表中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4941004/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 06:37:31 来源:igfitidea点击:
Putting images with options in a dropdown list
提问by Judy
I was trying to insert images in a drop down list. I tried the following code but its not working. What is the best way to achieve this?
我试图在下拉列表中插入图像。我尝试了以下代码，但它不起作用。实现这一目标的最佳方法是什么？
<select>
<option value="volvo"><IMG src="a.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Volvo</option>
<option value="saab"><IMG src="b.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Saab</option>
<option value="mercedes"><IMG src="c.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Mercedes</option>
<option value="audi"><IMG src="d.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Audi</option>
</select>
采纳答案by JiBKas
This code will work only in Firefox:
此代码仅适用于 Firefox：
<select>
<option value="volvo" style="background-image:url(images/volvo.png);">Volvo</option>
<option value="saab" style="background-image:url(images/saab.png);">Saab</option>
<option value="honda" style="background-image:url(images/honda.png);">Honda</option>
<option value="audi" style="background-image:url(images/audi.png);">Audi</option>
</select>
Edit (April 2018):
编辑（2018 年 4 月）：
Firefox does not support this anymore.
Firefox 不再支持此功能。
回答by Nick
You can't do that in plain HTML, but you can do it with jQuery:
你不能在纯 HTML 中做到这一点，但你可以用 jQuery 做到：
JavaScript Image Dropdown
Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing "select" element or you can create by JSON object.
JavaScript 图像下拉菜单
你厌倦了你的旧时尚下拉菜单吗？试试这个新的。图像组合框。您可以为每个选项添加一个图标。它适用于您现有的“选择”元素，或者您可以通过 JSON 对象创建。
回答by Giannis Grivas
This is exactly what you need. See it in action here 8FydL/445
这正是您所需要的。在这里查看它的实际效果8FydL/445
Example's Code below:
示例代码如下：
$(".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"); .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 bob.mazzo
folks, I got this Bootstrap dropdown working. I modified the click event slightly in order to keep the currently-selected image. And as you see, the USD currency is the default selected :
伙计们，我让这个 Bootstrap 下拉菜单正常工作。我稍微修改了点击事件以保留当前选择的图像。如您所见，美元货币是默认选择的：
<div class="btn-group" style="margin:10px;"> <!-- CURRENCY, BOOTSTRAP DROPDOWN -->
<!--<a class="btn btn-primary" href="javascript:void(0);">Currency</a>-->
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><img src="../../Images/flag-usd-small.png"> USD <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);">
<img src="../../Images/flag-aud-small.png" /> AUD</a>
</li>
<li><a href="javascript:void(0);">
<img src="../../Images/flag-cad-small.png" /> CAD</a>
</li>
<li><a href="javascript:void(0);">
<img src="../../Images/flag-cny-small.png" /> CNY</a>
</li>
<li><a href="javascript:void(0);">
<img src="../../Images/flag-gbp-small.png" /> GBP</a>
</li>
<li><a href="javascript:void(0);">
<img src="../../Images/flag-usd-small.png" /> USD</a>
</li>
</ul>
</div>
/* BOOTSTRAP DROPDOWN MENU - Update selected item text and image */
$(".dropdown-menu li a").click(function () {
var selText = $(this).text();
var imgSource = $(this).find('img').attr('src');
var img = '<img src="' + imgSource + '"/>';
$(this).parents('.btn-group').find('.dropdown-toggle').html(img + ' ' + selText + ' <span class="caret"></span>');
});
回答by Sarwar Erfan
You need to achieve that using CSS
你需要使用 CSS 来实现
http://binnyva.blogspot.com/2006/01/icons-for-select-menu-options-in.html
http://binnyva.blogspot.com/2006/01/icons-for-select-menu-options-in.html
回答by Clain Dsilva
I have found a crossbrowser compatible JQuery plugin here.
我在这里找到了一个跨浏览器兼容的 JQuery 插件。
http://designwithpc.com/Plugins/ddSlick
http://designwithpc.com/Plugins/ddSlick
probably useful in this scenario.
在这种情况下可能很有用。
回答by Sachin Sanchaniya
Checkout And Run The Following Code. It will help you...
签出并运行以下代码。它会帮助你...
$( function() {
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function( ul, item ) {
var li = $( "<li>" ),
wrapper = $( "<div>", { text: item.label } );
if ( item.disabled ) {
li.addClass( "ui-state-disabled" );
}
$( "<span>", {
style: item.element.attr( "data-style" ),
"class": "ui-icon " + item.element.attr( "data-class" )
})
.appendTo( wrapper );
return li.append( wrapper ).appendTo( ul );
}
});
$( "#filesA" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
.addClass( "ui-menu-icons" );
$( "#filesB" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
.addClass( "ui-menu-icons customicons" );
$( "#people" )
.iconselectmenu()
.iconselectmenu( "menuWidget")
.addClass( "ui-menu-icons avatar" );
} );
</script>
<style>
h2 {
margin: 30px 0 0 0;
}
fieldset {
border: 0;
}
label{
display: block;
}
/* select with custom icons */
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
padding: 0.5em 0 0.5em 3em;
}
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
height: 24px;
width: 24px;
top: 0.1em;
}
.ui-icon.video {
background: url("images/24-video-square.png") 0 0 no-repeat;
}
.ui-icon.podcast {
background: url("images/24-podcast-square.png") 0 0 no-repeat;
}
.ui-icon.rss {
background: url("images/24-rss-square.png") 0 0 no-repeat;
}
/* select with CSS avatar icons */
option.avatar {
background-repeat: no-repeat !important;
padding-left: 20px;
}
.avatar .ui-icon {
background-position: left top;
}<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Custom Rendering</title>
</head>
<body>
<div class="demo">
<form action="#">
<h2>Selectmenu with framework icons</h2>
<fieldset>
<label for="filesA">Select a File:</label>
<select name="filesA" id="filesA">
<option value="jquery" data-class="ui-icon-script">jQuery.js</option>
<option value="jquerylogo" data-class="ui-icon-image">jQuery Logo</option>
<option value="jqueryui" data-class="ui-icon-script">ui.jQuery.js</option>
<option value="jqueryuilogo" selected="selected" data-class="ui-icon-image">jQuery UI Logo</option>
<option value="somefile" disabled="disabled" data-class="ui-icon-help">Some unknown file</option>
</select>
</fieldset>
<h2>Selectmenu with custom icon images</h2>
<fieldset>
<label for="filesB">Select a podcast:</label>
<select name="filesB" id="filesB">
<option value="mypodcast" data-class="podcast">John Resig Podcast</option>
<option value="myvideo" data-class="video">Scott González Video</option>
<option value="myrss" data-class="rss">jQuery RSS XML</option>
</select>
</fieldset>
<h2>Selectmenu with custom avatar 16x16 images as CSS background</h2>
<fieldset>
<label for="people">Select a Person:</label>
<select name="people" id="people">
<option value="1" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&r=g&s=16');">John Resig</option>
<option value="2" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&r=g&s=16');">Tauren Mills</option>
<option value="3" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=16');">Jane Doe</option>
</select>
</fieldset>
</form>
</div>
</body>
</html>