>_Image Dropdown

Posted 2 years ago  32989 reads  

JavaScript image dropdown

You may have used my old MsDropdown. But this is new :) it is a web component. I so wanted to write this without jQuery and I did it finally. I hope one fine day safari will also support true web component features; just like other Chromium browsers does. Hey Apple! Are you listening? But please, do not worry; it works on safari too :).

It does not just beautify your boring dropdown but you can add an icon/image with each option. It works with your existing <select> element or you can create by a JSON object.

Image Dropdown Preview: 

Image dropdown preview

Image dropdown features at glance:
(Kept all the features from the previous version)

  • Written in ES6 style using class
  • Reactive properties
  • Fully Skin-able
  • Cleaner look
  • Your original dropdown is safe, so your form post will not be messed. Well, it borrows the name from your original dropdown.
  • Can be created via JSON object
  • An image and a description can be inserted with text. Each <option> can have an image and description.
  • It is possible to repopulate the data.
  • You can Enabled/Disabled your dropdown.
  • Almost all events and features are working as you expect with native dropdown.
  • It's better than the original dropdown in many cases

Image DropDown v4.0 Features

  • W3C Compatible
  • More Organised
  • Keyboard navigation
  • Multiple selections (List). (Ctrl/Shift pressed also works)
  • OptGroup is supported
  • Multiple selections can have checkbox UI
  • 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
  • Removed all unnecessary methods and bloated code.
  • It's FREE again :)


No dependency. Written in plain/vanilla JavaScript.

How to use it?

Powered by HashtagCms.org