Good looking selection box with image per option

DrRakha

This code allows you to have fancy looking select element with different image per each option element, also special highlights and effects.
javascript code

<html>
<head>
<title>select dropdown using JQuery</title>
  
<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. -->
<script src="jquery-1.8.3.js"></script>
  <script>
    (function($) {
$.fn.fancyDropdown = function() {
return this.each(function() {
var el = $(this);
var id = $(this).attr('id');
el.hide();
//create needed HTML
var html = '<div class="dropdown" id="'+id+'_dropdown"></div>'+
'<ul class="dropdownlist" id="'+id+'_dropdownlist">';
$('option', el).each(function() {
var realvalue = $(this).attr("value");
var img = $(this).attr("data-img");
var info = $(this).attr("data-info");
if (info == null) {
html += '<li data-realvalue="'+realvalue+'"><div class="imgholder">'+
'<img src="'+img+'" /></div><p class="no-info"><strong>'+$(this).text()+
'</strong></p><div class="clearfix"></div>';
} else {
html += '<li data-realvalue="'+realvalue+'"><div class="imgholder">'+
'<img src="'+img+'" /></div><p><strong>'+$(this).text()+'</strong><br />'
+info+'</p><div class="clearfix"></div>';
}
});
html += '</ul>';
el.after(html);
//set initial values
var initoption = $('li[data-realvalue="'+el.val()+'"]', $('#'+id+'_dropdownlist'));
initoption.attr('class', 'active');
$('#'+id+'_dropdown').attr('data-realvalue', 
initoption.attr('data-realvalue')).html(initoption.html());
//bind click event
if ($("body").hasEventListener("click.customdropdown").length == 0) {
//bind the click event only once
$('body').bind('click.customdropdown', function(e) {
var elements = $(e.target).parents().andSelf();
var dropdown = elements.filter('.dropdown');
var dropdownlist = elements.filter('.dropdownlist');
if (dropdown.length == 0 && dropdownlist.length == 0) {
//not clicked on .dropdown or .dropdownlist, hide .dropdownlist
$(".dropdownlist").fadeOut('fast');
$(".dropdown").removeClass('active_dropdown');
} else {
if (dropdown.length != 0) {
//clicked on .dropdown
var dropdownid = $(dropdown[0]).attr('id');
if ($("#"+dropdownid).hasClass('active_dropdown')) {
//close all .dropdownlist
$(".dropdownlist").fadeOut('fast');
$(".dropdown").removeClass('active_dropdown');
} else {
//close all .dropdownlist
$(".dropdownlist").fadeOut('fast');
$(".dropdown").removeClass('active_dropdown');
//and open the clicked one
$("#"+dropdownid).addClass('active_dropdown');
$("#"+dropdownid+"list li.active").addClass('hover').siblings().removeClass('hover');
var pos = $(dropdown[0]).position();
$("#"+dropdownid+"list").css({
top: (pos.top+$(dropdown[0]).outerHeight())+'px',
left: pos.left+'px'
}).fadeIn('fast');
}
} else {
//clicked on .dropdownlist
var dropdownid = $(dropdownlist[0]).attr('id').slice(0, -4);
var li = $(elements.filter('li')[0]);
$('#'+dropdownid).removeClass('active_dropdown').attr('data-realvalue', 
li.attr('data-realvalue')).html(li.html());
li.addClass('active').siblings().removeClass('active');
$(dropdownlist[0]).fadeOut('fast');
//reflect change to original <select> element
$("#"+dropdownid.slice(0, -9)).val(li.attr('data-realvalue'));
}
}
});
}
//add hover states
$(".dropdownlist li").live('mouseover', function() {
$(this).addClass("hover").siblings().removeClass("hover");
});
$(".dropdown").live('mouseover', function() {
$(this).addClass('hover_dropdown');
}).live('mouseout', function() {
$(this).removeClass('hover_dropdown');
});
});
};
})(jQuery);

/* v.1.0.5 - Jan. 8, 2011 - Copyright (c) 2010 Sebastien P. - 
http://twitter.com/_sebastienp - MIT licensed. */
(function(b,e,f){"use strict";function h(a)
{return!!(a&&typeof a==="string"&&b.trim(a))}
var k=+b.fn.jquery.slice(0,3)>1.3?"namespace":"type";
b[e]=function(a,c)
{var d=b.data(a,"events"),g=!f,i,j;if(d)if(h(c)&&(c=/^([a-z]+)(\.(.+))?$/.exec(c)))
{if(d=d[c[1]])if(i=c[3])
b.each(d,function(){if((j=this[k])&&j.split(".")[0]===i)
return!(g=f)});else g=f}else g=f;return g};
b.expr[":"][e]=function(a,c,d){return b[e](a,d[3])};
b.fn[e]=function(a){return this.filter(":"+e+(h(a)?"("+a+")":""))}})
(this.jQuery,"hasEventListener",true);
</script>

<style type="text/css">
.dropdown {
	border: 1px solid #B1BDC8;
	border-bottom-color: #ABB8C5;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background: #F0F2F3 url(dropdown_bg.png) repeat-x left top;
	padding: 2px;
	height: 35px;
	cursor: pointer;
}

.hover_dropdown {
	border-color: #f1ca58 #f4d053 #f7d84b #f4d053;
	background: #F0F2F3 url(dropdownlist_hover_bg.png) repeat-x left top;
}

.active_dropdown {
	border-color: #c2762b #c28838 #c29e47 #c28636;
	background: #F0F2F3 url(active_dropdown_bg.png) repeat-x left top;
}

.dropdownlist {
	list-style: none;
	border: 1px solid #A7ABB0;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	padding: 1px;
	cursor: pointer;
	background-color: #FFF;
	-webkit-box-shadow: 2px 2px 5px #D8D8D8;
	-moz-box-shadow: 2px 2px 5px #D8D8D8;
	box-shadow: 2px 2px 5px #D8D8D8;
	filter: progid:DXImageTransform.Microsoft.Shadow
	(Strength=5, Direction=135, Color='#D8D8D8');
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

.dropdownlist li {
	border-width: 0px;
	padding: 2px;
}

.dropdownlist li.active img {
	background: transparent url(dropdownlist_active_img_bg.png) 
	no-repeat left top;
}

.dropdownlist li.hover {
	border: 1px solid white;
	border-color: #f1ca58 #f4d053 #f7d84b #f4d053;
	-moz-border-radius: 2px;
	-o-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	background: #F0F2F3 url(dropdownlist_hover_bg.png) 
	repeat-x left top;
	padding: 1px;
}

.dropdown .imgholder, .dropdownlist .imgholder {
	float: left;
	width: 33px;
	height: 33px;
	padding: 1px;
	margin-right: 2px;
}

.dropdown p, .dropdownlist p {
	margin: 2px 4px 0px 2px;
	color: #8A8A8A;
	height: 31px;
}

.dropdown p.no-info, .dropdownlist p.no-info {
	height: 23px;
	padding: 8px 0 0 0;
}

.dropdown p {
	background: url(arrowhead_down.png) no-repeat right 14px;
}

.dropdown p strong, .dropdown_no-info p strong, .dropdownlist p strong {
	color: #262626;
}
body, html {
		font-family: "Segoe UI", "Liberation Sans", "Trebuchet MS", 
		Helvetica, Arial, sans-serif; 
		font-size: 12px;
		height: 100%;
	}
	* {
		margin: 0;
		padding: 0;
	}
	#wrapper {
		width: 600px;
		margin: 0px auto;
	}
	button {
		font-family: "Segoe UI", "Liberation Sans", "Trebuchet MS", Helvetica, Arial, sans-serif;
		font-size: 12px;
		padding: 5px;
		width: 80px;
		cursor: pointer;
	}
	.clearfix {
		clear: both;
	}
	h2 {
		margin: 15px 0px;
	}
	p, h3 {
		margin: 10px 0px 15px 0px;
	}
	hr {
		margin-top: 15px;
	}
	
	/*Extra styling for the fancy dropdowns*/
	.dropdown, .dropdown_no-info {
		width: 250px;
		margin-bottom: 15px;
	}
	.dropdownlist {
		width: 252px;
	}
</style>
</head>
<body>
     <center><strong>Select Your City</strong>
	<select name="paperFormat" id="paperFormat">
	                <!-- You change the image per Option -->
				<option value="Cairo" data-img="SmallSmileyFace.jpg" data-info="Located in Egypt">Cairo</option>
				<option value="London" data-img="SmallSmileyFace.jpg" data-info="Located in United Kingdom">London</option>
				<option value="Texas" data-img="SmallSmileyFace.jpg" data-info="Located in United USA">Texas</option>
			</select>
     </center>
	 
	 <script type="text/javascript">
		$("#paperFormat").add($("#paperOrientation")).fancyDropdown();
		$("#testform").submit(function() {
			alert('You selected:\r\n\r\nFirst normal: '+
			$("#paperFormat_normal").val()+'\r\nSecond normal: '+
			$("#paperOrientation_normal").val()+'\r\n\r\nFirst fancy: '+
			$("#paperFormat").val()+'\r\nSecond fancy: '+$("#paperOrientation").val());
			return false;
		});
	</script>
   
</body>
 
</html>

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka

Good looking selection box with image per option

Topic Tags