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>
This question is related to
html
html-select
I have found a crossbrowser compatible JQuery plugin here.
http://designwithpc.com/Plugins/ddSlick
probably useful in this scenario.
You can't do that in plain HTML, but you can do it with 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.
This is exactly what you need. See it in action here 8FydL/445
Example's Code below:
$(".dropdown img.flag").addClass("flagvisibility");_x000D_
$(".dropdown dt a").click(function() {_x000D_
$(".dropdown dd ul").toggle();_x000D_
});_x000D_
_x000D_
$(".dropdown dd ul li a").click(function() {_x000D_
var text = $(this).html();_x000D_
$(".dropdown dt a span").html(text);_x000D_
$(".dropdown dd ul").hide();_x000D_
$("#result").html("Selected value is: " + getSelectedValue("sample"));_x000D_
});_x000D_
_x000D_
function getSelectedValue(id) {_x000D_
return $("#" + id).find("dt a span.value").html();_x000D_
}_x000D_
_x000D_
$(document).bind('click', function(e) {_x000D_
var $clicked = $(e.target);_x000D_
if (! $clicked.parents().hasClass("dropdown"))_x000D_
$(".dropdown dd ul").hide();_x000D_
});_x000D_
_x000D_
$(".dropdown img.flag").toggleClass("flagvisibility"); .desc { color:#6b6b6b;}_x000D_
.desc a {color:#0092dd;}_x000D_
_x000D_
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }_x000D_
.dropdown dd { position:relative; }_x000D_
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}_x000D_
.dropdown a:hover { color:#5d4617;}_x000D_
.dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}_x000D_
.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;_x000D_
border:1px solid #d4ca9a; width:150px;}_x000D_
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}_x000D_
.dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;_x000D_
left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}_x000D_
.dropdown span.value { display:none;}_x000D_
.dropdown dd ul li a { padding:5px; display:block;}_x000D_
.dropdown dd ul li a:hover { background-color:#d0c9af;}_x000D_
_x000D_
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }_x000D_
.flagvisibility { display:none;} <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>_x000D_
<dl id="sample" class="dropdown">_x000D_
<dt><a href="#"><span>Please select the country</span></a></dt>_x000D_
<dd>_x000D_
<ul>_x000D_
<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>_x000D_
<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>_x000D_
_x000D_
</ul>_x000D_
</dd>_x000D_
</dl>_x000D_
<span id="result"></span>I found a lot of people recommending ddSlick.js it seems to be a really cool option ! unfortunately it doesnt work as expected for me, maybe I didn't know how to integrate it, today I discovered a library like bootstrap named : MaterialiseCss so I returned to this section to help !!
https://materializecss.com/select.html
https://materializecss.com/dropdown.html
Checkout And Run The Following Code. It will help you...
$( function() {_x000D_
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {_x000D_
_renderItem: function( ul, item ) {_x000D_
var li = $( "<li>" ),_x000D_
wrapper = $( "<div>", { text: item.label } );_x000D_
_x000D_
if ( item.disabled ) {_x000D_
li.addClass( "ui-state-disabled" );_x000D_
}_x000D_
_x000D_
$( "<span>", {_x000D_
style: item.element.attr( "data-style" ),_x000D_
"class": "ui-icon " + item.element.attr( "data-class" )_x000D_
})_x000D_
.appendTo( wrapper );_x000D_
_x000D_
return li.append( wrapper ).appendTo( ul );_x000D_
}_x000D_
});_x000D_
_x000D_
$( "#filesA" )_x000D_
.iconselectmenu()_x000D_
.iconselectmenu( "menuWidget" )_x000D_
.addClass( "ui-menu-icons" );_x000D_
_x000D_
$( "#filesB" )_x000D_
.iconselectmenu()_x000D_
.iconselectmenu( "menuWidget" )_x000D_
.addClass( "ui-menu-icons customicons" );_x000D_
_x000D_
$( "#people" )_x000D_
.iconselectmenu()_x000D_
.iconselectmenu( "menuWidget")_x000D_
.addClass( "ui-menu-icons avatar" );_x000D_
} );_x000D_
</script>_x000D_
<style>_x000D_
h2 {_x000D_
margin: 30px 0 0 0;_x000D_
}_x000D_
fieldset {_x000D_
border: 0;_x000D_
}_x000D_
label{_x000D_
display: block;_x000D_
}_x000D_
_x000D_
/* select with custom icons */_x000D_
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {_x000D_
padding: 0.5em 0 0.5em 3em;_x000D_
}_x000D_
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {_x000D_
height: 24px;_x000D_
width: 24px;_x000D_
top: 0.1em;_x000D_
}_x000D_
.ui-icon.video {_x000D_
background: url("images/24-video-square.png") 0 0 no-repeat;_x000D_
}_x000D_
.ui-icon.podcast {_x000D_
background: url("images/24-podcast-square.png") 0 0 no-repeat;_x000D_
}_x000D_
.ui-icon.rss {_x000D_
background: url("images/24-rss-square.png") 0 0 no-repeat;_x000D_
}_x000D_
_x000D_
/* select with CSS avatar icons */_x000D_
option.avatar {_x000D_
background-repeat: no-repeat !important;_x000D_
padding-left: 20px;_x000D_
}_x000D_
.avatar .ui-icon {_x000D_
background-position: left top;_x000D_
}<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>_x000D_
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>_x000D_
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>_x000D_
<!doctype html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
<meta charset="utf-8">_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
<title>jQuery UI Selectmenu - Custom Rendering</title>_x000D_
_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div class="demo">_x000D_
_x000D_
<form action="#">_x000D_
<h2>Selectmenu with framework icons</h2>_x000D_
<fieldset>_x000D_
<label for="filesA">Select a File:</label>_x000D_
<select name="filesA" id="filesA">_x000D_
<option value="jquery" data-class="ui-icon-script">jQuery.js</option>_x000D_
<option value="jquerylogo" data-class="ui-icon-image">jQuery Logo</option>_x000D_
<option value="jqueryui" data-class="ui-icon-script">ui.jQuery.js</option>_x000D_
<option value="jqueryuilogo" selected="selected" data-class="ui-icon-image">jQuery UI Logo</option>_x000D_
<option value="somefile" disabled="disabled" data-class="ui-icon-help">Some unknown file</option>_x000D_
</select>_x000D_
</fieldset>_x000D_
_x000D_
<h2>Selectmenu with custom icon images</h2>_x000D_
<fieldset>_x000D_
<label for="filesB">Select a podcast:</label>_x000D_
<select name="filesB" id="filesB">_x000D_
<option value="mypodcast" data-class="podcast">John Resig Podcast</option>_x000D_
<option value="myvideo" data-class="video">Scott González Video</option>_x000D_
<option value="myrss" data-class="rss">jQuery RSS XML</option>_x000D_
</select>_x000D_
</fieldset>_x000D_
_x000D_
<h2>Selectmenu with custom avatar 16x16 images as CSS background</h2>_x000D_
<fieldset>_x000D_
<label for="people">Select a Person:</label>_x000D_
<select name="people" id="people">_x000D_
<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>_x000D_
<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>_x000D_
<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>_x000D_
</select>_x000D_
</fieldset>_x000D_
</form>_x000D_
_x000D_
</div>_x000D_
_x000D_
_x000D_
</body>_x000D_
</html>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 :
<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>');
});
You need to achieve that using CSS
http://binnyva.blogspot.com/2006/01/icons-for-select-menu-options-in.html
Source: Stackoverflow.com