Total members 11837 |It is currently Fri Oct 30, 2020 12:01 pm Login / Join Codemiles














R Scripts


This code allows you to have fancy looking select element with different image per each option element, also special highlights and effects.
javascript code
<title>select dropdown using JQuery</title>

<script src="//">
Note you can download the JQuery package instead of using Google version. -->
<script src="jquery-1.8.3.js"></script>
(function($) {
$.fn.fancyDropdown = function() {
return this.each(function() {
var el = $(this);
var id = $(this).attr('id');
//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>';
//set initial values
var initoption = $('li[data-realvalue="'+el.val()+'"]', $('#'+id+'_dropdownlist'));
initoption.attr('class', 'active');
//bind click event
if ($("body").hasEventListener("click.customdropdown").length == 0) {
//bind the click event only once
$('body').bind('click.customdropdown', function(e) {
var elements = $(;
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
} else {
if (dropdown.length != 0) {
//clicked on .dropdown
var dropdownid = $(dropdown[0]).attr('id');
if ($("#"+dropdownid).hasClass('active_dropdown')) {
//close all .dropdownlist
} else {
//close all .dropdownlist
//and open the clicked one
var pos = $(dropdown[0]).position();
top: ($(dropdown[0]).outerHeight())+'px',
left: pos.left+'px'
} else {
//clicked on .dropdownlist
var dropdownid = $(dropdownlist[0]).attr('id').slice(0, -4);
var li = $(elements.filter('li')[0]);
//reflect change to original <select> element
$("#"+dropdownid.slice(0, -9)).val(li.attr('data-realvalue'));
//add hover states
$(".dropdownlist li").live('mouseover', function() {
$(".dropdown").live('mouseover', function() {
}).live('mouseout', function() {

/* v.1.0.5 - Jan. 8, 2011 - Copyright (c) 2010 Sebastien P. - - 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";
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+")":""))}})

<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 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, .dropdownlist {
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;
<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>

<script type="text/javascript">
$("#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;



File comment: Contains all files needed for this example
JQueryXX.rar [77.49 KiB]
Downloaded 503 times

M. S. Rakha, Ph.D.
Queen's University
User avatar Posts: 2715
Have thanks: 74 time
Post new topic Reply to topic  [ 1 post ] 

  Related Posts  to : Good looking selection box with image per option
 how to load the form elements depending on selection option     -  
 good books of jsp and jdbc     -  
 here are 2 realy good books for sql     -  
 Good looking HeatMap example in R using ggplot2     -  
 Why is Using Gamification Good for Your Business?     -  
 How does one get good code for embeded video     -  
 project in java.....plz suggest good ones........     -  
 need a good topic for project in java     -  
 selection sort     -  
 C++ Selection Sort     -  

Topic Tags

JQuery Image

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to 2007-2011
mileX v1.0 designed by codemiles team is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to