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?

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

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

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