我试图在下拉列表中插入图片。我尝试了以下代码,但它不起作用。实现这一目标的最佳方法是什么?
<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>
答案 0 :(得分:19)
您无法在纯HTML中执行此操作,但您可以使用jQuery执行此操作:
JavaScript Image Dropdown
你对旧时尚的下拉感到厌烦吗?试试这个新的。图像组合框。您可以为每个选项添加一个图标。它适用于您现有的“select”元素,或者您可以通过JSON对象创建。
答案 1 :(得分:19)
此代码仅适用于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>
编辑(2018年4月):
Firefox不再支持此功能了。
答案 2 :(得分:10)
这正是您所需要的。请在此处查看8FydL/445
以下示例代码:
CSS:
.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;}
JS:
$(".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");
和Demo Html:
<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>
答案 3 :(得分:8)
答案 4 :(得分:7)
人, 我得到了这个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>');
});
答案 5 :(得分:6)
答案 6 :(得分:6)
结帐并运行以下代码。它会帮助你...
$( 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>
答案 7 :(得分:1)
如果您准备好使用名为DHTMLX的Javascript框架,则它们具有一个名为dhtmlxCombo的组件,该组件允许您执行此操作。有一个开源版本,并且在链接中提供了您所需要的输出示例代码下面
答案 8 :(得分:0)
我发现很多人都推荐ddSlick.js,这似乎是一个非常不错的选择!不幸的是,它无法按我的预期运行,也许我不知道如何集成它,今天我发现了一个名为bootstrap的库,名为:MaterialiseCss 所以我回到本节为您提供帮助!
https://materializecss.com/select.html
https://materializecss.com/dropdown.html