将图像与选项放在下拉列表中
我试图在下拉列表中插入图像。 我试过下面的代码，但它不工作。 达到这个目标的最好方法是什么？
<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> 此代码只能在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>
你不能用纯HTML完成，但你可以用jQuery做到这一点：
JavaScript图片下拉菜单
你是否厌倦了你的旧时尚下拉？ 试试这个新的。 图像combobox。 您可以添加每个选项的图标。 它可以与你现有的“select”元素一起工作，也可以通过JSON对象来创build。
这正是你所需要的。 在这里看到它的行动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('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");
和演示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>
伙计们，我得到了这个Bootstrap下拉工作。 我稍微修改了点击事件，以保持当前select的图像。 而且如您所见，美元货币是所选的默认货币：
<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>'); });
结帐并运行以下代码。 它会帮助你…
$( 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>
