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

Dependency:

No dependency. Written in plain/vanilla JavaScript.

How to use it?

1. Yes, This is a normal dropdown but I've added image path in "data-image" attribute in <option> and is="ms-dropdown" in <select>. See below.


    <select name="webmenu" is="ms-dropdown">
    <option value="calendar" data-image="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" data-image="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" data-image="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" title="icons/icon_email.gif">Email</option>
    <option value="faq" data-image="icons/icon_faq.gif">FAQ</option>
    <option value="games" data-image="icons/icon_games.gif">Games</option>
  </select>

Import CSS in the header.

2. Add this code in <head> the section. You may need to change the folder. Change dist/css/ folder to your desired folder.

<link rel="stylesheet" type="text/css" href="dist/css/dd.css" />

3. And below code before the </body>. Change dist/js/ folder to your desired folder.

<script src="dist/js/dd.min.js"></script>

You are done. That's It. I swear :)

Do you want to explore msDropdown in detail? Click here for more help

Download from GitHub.com

Visit Github to download

Image Dropdown