JavaScript image combobox/ JavaScript image dropdown

JavaScript custom dropdown

JavaScript image combobox

I was looking for a JavaScript custom image dropdown. Of course I did some googling also. But I did not find what I was looking for. So I've decided to make my own javascript dropdown. It works with your existing "select" element. I hope you'll like this.

Custom 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.


• You can covert all combobox as a custom combobox, you can convert by id, multiple ids, or by wild card. We'll see that in example.


• Only 10 KB without any compression.

Dependency:

Jquery 1.2.6 or later.

Custom dropdown weakness:

• You need to replace "onchange" with "onblur" if you are using any onchange method with your dropdown.


• re-population is not working for now.

I don't want to make this document complicated. So coming directly to examples.

Have a look at original dropdown.

<select name="webmenu" id="webmenu" onblur="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 and replaced "onchange" method with "onblur".

<select name="webmenu" id="webmenu" onblur="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?

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 in "body".



<script language="javascript">
$(document).ready(function(e) {
    MSDropDown.init();
      }
   )
</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) {
    MSDropDown.init("#combo1, #combo2");
      }
   )
</script>

How to change skin?

You are kidding me. CSS (dd.css) is yours, now play with that. Just keep few things in mind. Please don't change "display, float and overflow" attributes.

Example:

Please click here to see. (opens in a new window)

Download Custom Dropdown:

http://www.marghoobsuleman.com/node/103/