New Version 4.0.x is available - Read here.

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 a JSON object. I hope you'll like this.

Preview:

Preview

Feature at glance:

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

Image DropDown v3.5 Features

Each dropdown can have its own properties.
W3C Compatible
More Organised
Keyboard navigation
Multiple selections (List)
Multiple selections can have checkbox UI
Event Chaining
Multiple skins on a 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 the 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 an image path in the "data-image" attribute. See below.

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

2. How to use (Script Part)?

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

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

Release notes: v3.5 (expand/collapse)

$.browser - jQuery 1.9 version fixed
Keyboard navigation issue has been fixed
destory is now destroy - oops typo error

v3.2 updates:

All setting parameters can passed throught element's data- attributes. ie. data-maincss="blue"
zIndex bug fixed for list and dropdown if both on the same page.
Added setIndexByValue method. However same can be done by - handler.set("value", value)
Added "append" and "prepend" in setting params. append is used to append the element to the childdiv and prepend do as the name suggest.
Added one more help file for objected oriented approach.

v3.1.1 updates:

chrome onchange bug fixed
less than ie8 zindex bug fixed
less than ie8 add() method bug fixed

v3.1 updates:

Child width can be alter
New multiple is introduced. Its multiple but with the checkbox.
Bonus: elementname_mscheck will be posted along with the form post/get. i.e. if element name is "tech" checkbox tech_mscheck[] is created. However you can set the suffix using 'checkboxNameSuffix' parameter.

v3.0 updates:

Written from scratch
Improved performance and UI
Improved auto filter experience
Added data- support in attributes for image, description, title, imagecss, text and value
Event can be bind/unbind through object
Organized folder structure
Old style (with title attribute) is also working.
Country dropdown with flags as a bonus

v2.38 updates:

document keydown/keyup method unbind
added json support in title. {image:'', title:''}
onchange bug on onclose
CSS style declaration problem
jQuery 1.7.1 compatibility issue
IE8 sprite

v2.37.5 updates:

Fixed an ie6 error.

v2.37 updates:

values are updated properly when it opens upwards
Now works with jQuery 1.6.1.
Improved performance
Added quick selection. Filter options on key press

v2.36 updates:

Onchange bug has been fixed. Finally :)
No more id is required.

v2.35 updates:

Now works in FF4.
Onchange bug has been fixed.
DropUp when your dropdown is showing at bottom of the page.
Some minor ui changes

v2.3 updates:

CSS sprite chrome bug has been fixed.

Click here to play with the demo!

Download from GitHub.com

https://github.com/marghoobsuleman/ms-Dropdown

Jquery Image Dropdown