Using msDropDown - a dropdown with icon in the option

msDropDown is a nice plugin. Its a dropdown plugin where we can use icon with the option of the select element. The detail of the plugin can be found here. Implementation goes like below-

We need to add the jQuery and msDropDown script and css file reference. We can download the files form the plugin site given above.

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>
    <script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/msdropdown/js/jquery.dd.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/msdropdown/dd.css" />

Working principle of the plugin is very simple. We need to add the icon path to the title of the option in select tag. Like below-

<option value="value" title="path of the icon">text</option>

Lets have a sample dropdown for this-

    <select name="webmenu" id="webmenu" onchange="showValue(this.value)">
        <option value="calendar" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_calendar.gif">
            Calendar</option>
        <option value="shopping_cart" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_cart.gif">
            Shopping Cart</option>
        <option value="cd" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_cd.gif">
            CD</option>
        <option value="email" selected="selected" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_email.gif">
            Email</option>
        <option value="faq" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_faq.gif">
            FAQ</option>
        <option value="games" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_games.gif">
            Games</option>
    </select>

Now we can activate the msDropDown by the following JavaScript code-

    <script language="javascript">
        $(document).ready(function (e) {
            try {
                $("#webmenu").msDropDown();
            } catch (e) {
                alert(e.message);
            }
        });
    </script>

Thats all. For various other options we can check the plugin site.