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 can have an image.
• You may covert all combobox as a 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.

Image dropdown weakness:

* onkeypress, onkeydown and onkeyup are still not working.
* option’s inline style is not working in IE

I’ve nothing more to say. So coming directly to the example.
How to use (HTML Part)?
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 an “icon” attribute in option elements.

  <select name="webmenu" id="webmenu" onchange="showValue(this.value)">
    <option value="calendar" icon="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" icon="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" icon="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" icon="icons/icon_email.gif">Email</option>
    <option value="faq" icon="icons/icon_faq.gif">FAQ</option>
    <option value="games" icon="icons/icon_games.gif">Games</option>
    <option value="music" icon="icons/icon_music.gif">Music</option>
    <option value="phone" icon="icons/icon_phone.gif">Phone</option>
    <option value="graph" icon="icons/icon_sales.gif">Graph</option>
    <option value="secured" icon="icons/icon_secure.gif">Secured</option>
    <option value="video" icon="icons/icon_video.gif">Video</option>
  </select>

How to use (Script Part)?
You need to add following code in “header”.

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

One more step and you are done Add following code anywhere in the “body”.

  <script language="javascript">
$(document).ready(function(e) {
							try {
								MSDropDown.init();
							} catch(e) {
								alert(e);
							}
						   }
				  )
</script>

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

  <script language="javascript">
$(document).ready(function(e) {
							try {

// target some ids
MSDropDown.init("#combo1, #combo2");
//by wild card
MSDropDown.init("#divid select");
//or
MSDropDown.init("#formid select");

							} catch(e) {
								alert(e);
							}
						   }
				  )
</script>

How to change skin?

You are kidding me. 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!
Methods:

    //covert normal dropdown to image dropdown
    1. MSDropDown.init([#id1, #id2 | from2 > select | body > select]);

    //close active dropdown
    2. MSDropDown.closeDropDown();

    //show alt text on each combo's option
    3. MSDropDown.showTitle(true | false); 

    //show icon with title
    4. MSDropDown.showIconWithTitle(true | false);
    

Demo: http://marghoobsuleman.com/mywork/jcomponents/customdropdown/dropDownCustom.html

Download: http://marghoobsuleman.com/sites/default/files/customdropdown_1.5.zip (Latest Version)

Source: http://marghoobsuleman.com/jquery-image-dropdown

Related Listings:

1. Javascript Wait While Loading Page Display Image If you have a page that takes long time...
2. Click and Drag Image Cropper : JavaScript Really sweet image cropper, modifiable via user drag and click...

Do you like this post?

Email: