JavaScript image combobox v2.1

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.

jQuery + msDropdown

Preview: 

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)?



AttachmentSize
jquery-image-dropdown-2.1.zip69.95 KB
drupal.module.msdropdown.zip79.22 KB

Your blog provided us

Your blog provided us valuable info to work on. You have done a marvellous job!

I found your blog on google

I found your blog on google and read a few of your other posts. I just added you to my reader.

!!!

fantastic work !!! THX !!!

It is a fantastic work but

It is a fantastic work but does it support by all browser?

excellent stuff! adding the

excellent stuff! adding the graphics to the drop down really gives it a much interactive feel.

Nice work

Good work and tutorial. I try to use this for primary menu

conflict with carousel script

First of all, fantastic plugin.

I've discovered a conflict between msdropdown and a gallery plugin I'm using: JCarousel Lite. Carousel moves stop working if I change options on the dropdown menu. But once I click on the dropdown again, the image switches to whatever I had clicked on in the carousel queue. not sure if this is where you track bugs, but wanted to say thanks for this great plug. And I'm looking forward to using it in a live environment.
-r nyc

Nice

It was my pleasure to visit your Website. I am also very enjoy the article.

How to make Link

I'm glad I found this script on the Internet and that such an appearance and function.

I have one question:
Is there any possibility to make a link to the website of this option?
If so how?

I fixed this self!

I fixed this self!

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated.