JavaScript custom dropdown - JavaScript image combobox
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. I hope you'll like this.
Preview:
Image dropdown features:
- 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. You just need to write following code after your population or activities.
//after your activities document.getElementById('yourcomboboxid').refresh(); //yes, you are right! A new method refresh() has been added with every combobox. - Almost all events are working.
Current Version: 2.1
Whats in v2.1?
- 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) New
- Free again :)
Dependency:
Jquery 1.2.6 or later.
This jQuery plugin works perfectly without any modification. Just follow the instruction and enjoy!
How to use (HTML Part)?
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>
<option value="music">Music</option>
<option value="phone">Phone</option>
<option value="graph">Graph</option>
<option value="secured">Secured</option>
<option value="video">Video</option>
</select>
Yes, This is a normal dropdown but I've added image path in "title". Previously it was "icon" attribute. This is good if you value W3C compatibility.
<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>
<option value="music" title="icons/icon_music.gif">Music</option>
<option value="phone" title="icons/icon_phone.gif">Phone</option>
<option value="graph" title="icons/icon_sales.gif">Graph</option>
<option value="secured" title="icons/icon_secure.gif">Secured</option>
<option value="video" title="icons/icon_video.gif">Video</option>
</select>
How to use (Script Part)?
2. You need to add following code in "header".
<script language="javascript" src="msdropdown/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript" src="msdropdown/js/jquery.dd.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="msdropdown/dd.css" />
3. One more step and you are done :) Add following code anywhere in the "body".
<script language="javascript">
$(document).ready(function(e) {
$("body select").msDropDown();
});
</script>
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});
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" attributes. Have Fun!
New Release: 3rd Sep, 2009
- Version 2.1
- Multiple selection implemented
Supported Browsers
Example:
Click here to play with demo!
You want it? Download!
| Attachment | Size |
|---|---|
| jquery-image-dropdown-2.1.zip | 69.95 KB |
| drupal.module.msdropdown.zip | 79.22 KB |




