Feature at glance:

• Fully Skin-able
• Your original dropdown is safe, so your form post will not be messed.
• An image can be inserted with your text. Each <option> can have an image.
• You may covert all combobox as image combobox, you may convert by id, multiple ids, or by wild card. We'll see that in example.
• Its possible to repopulate the data. You can also Enabled/Disabled your dropdown. Now with the object control.
• Almost all events are working.

Current Version: 2.3

Whats new feature in Image DropDown v2.3?

• Each dropdown can have own properties. This was missing badly in previous version.
• W3C Compatible
• More Organised
• True Jquery Plugin
• Keyboard navigation
• Multiple selection (List)
• Event Chaining
• Multiple skin on single page
• CSS Sprite for icons
• Object Oriented approach
• Open/Close via object
• Add/Remove via object
• Enabled/Disable via object
• You can set almost all properties via object
• It's FREE again :)

Dependency:

Jquery 1.2.6 or later.

This jQuery plugin works perfectly without any modification. Just follow the instruction and enjoy!

1. How to use (HTML Part)?

1.1 Have a look at original dropdown.

<select name="webmenu" id="webmenu"  onchange="showValue(this.value)">
    <option value="calendar">Calendar</option>
    <option value="shopping_cart">Shopping Cart</option>
    <option value="cd">CD</option>
    <option value="email"  selected="selected">Email</option>
    <option value="faq">FAQ</option>
    <option value="games">Games</option>
  </select>

Yes, This is a normal dropdown but I've added image path in "title" attribute.

<select name="webmenu" id="webmenu" onchange="showValue(this.value)">
    <option value="calendar" title="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" title="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" title="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" title="icons/icon_email.gif">Email</option>
    <option value="faq" title="icons/icon_faq.gif">FAQ</option>
    <option value="games" title="icons/icon_games.gif">Games</option>
  </select>

2. How to use (Script Part)?

2.1 You need to add following code in "header".

<script src="msdropdown/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="msdropdown/js/jquery.dd.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="msdropdown/dd.css" />

2.2 One more step and you are done :) Add following code anywhere in the "body".

 <script language="javascript">
$(document).ready(function(e) {
try {
$("body select").msDropDown();
} catch(e) {
alert(e.message);
}
});
</script>

You are done. That's It.

Know more about Image Dropdown

Make dropdown by Id's

Yes, That's possible. You can make custom dropdown by ids. Lets have a look.

// target only one id
$("#combo2").msDropDown();
// target multiple ids
$("#combo1, #combo2").msDropDown();
//by wild card
$("body select").msDropDown();
//or
$("#divid select").msDropDown();
//or 
$("#formid select").msDropDown();

Method & Properties:

//convert normal combobox to image comboxbox
1. $("#comboboxid").msDropDown();
//Show/hide icon on title bar. by default its "true"; 
2. $("#combo1").msDropDown({showIcon:false}); 
//Use inline style
3. $("#combo1").msDropDown({style:'background-color:#333, font-size:24px'}); 
//Visible rows (it would be good if you enter "rowHeight" when using "visibleRows");
4. $("#combo1").msDropDown({visibleRows:5, rowHeight:23});
5. $("#combo1").msDropDown({onInit:'callinitmethod'}); //this method will be called when your dropdown is initialized. 

How to change skin?

Smile :) ...CSS (dd.css) is yours, play with that. Just keep few things in mind. Please don't change "display, float and overflow" properties. Have Fun!

//Multiple skin on same page
$("#comboboxid").msDropDown({mainCSS:'dd2'}); //dd2 is your main CSS
$("#comboboxid2").msDropDown(); //dd is default;

Object Oriented Approach

var oDD = $('#comboboxid').msDropDown().data("dd");
oDD.add(new option({text:'lorem', value:'lorem'})); // behavior is same as original dropdown. 
//or
oDD.add({text:'lorem', value:'lorem', title:'images/ok.gif'}); //will add icon too. 

Functions

var oHandler = $('#comboboxid').msDropDown().data("dd");
oHandler.open();
//open dropdown

var oHandler = $('#comboboxid').msDropDown().data("dd");
oHandler.close();
//close dropdown

var oHandler = $('#comboboxid').msDropDown().data("dd");
oHandler.add(option, [index]);
//add new option 

var oHandler = $('#comboboxid').msDropDown().data("dd");
oHandler.remove(index);
//remove options

var oHandler = $('#comboboxid').msDropDown().data("dd");
oHandler.form();
//Returns form name

var oHandler = $('#comboboxid').msDropDown().data("dd");
oHandler.set(property, value);
//set property

var oHandler = $('#comboboxid').msDropDown().data("dd");
oHandler.get([property]);
//get property - get all properties without passing any argument.

var oHandler = $('#comboboxid').msDropDown().data("dd");
oHandler.item([index]);
//Returns option item 

var oHandler = $('#comboboxid').msDropDown().data("dd");
oHandler.namedItem(nm); 
//Returns the the named option item from a <select> element.

var oHandler = $('#comboboxid').msDropDown().data("dd");
oHandler.visible([true,false]);
//Set or get the visible property

var oHandler = $('#comboboxid').msDropDown().data("dd");
oHandler.disabled(true|false);
//Set the disabled property

var oHandler = $('#comboboxid').msDropDown().data("dd");
oHandler.multiple([true|false]);
//Set or get the multiple property

var oHandler = $('#comboboxid').msDropDown().data("dd");
oHandler.size([true|false]);
//Set or get  the size property