Fork me on GitHub
Ever wanted a drop down with images? Well, You now have a plugin for that!

ddSlick

A free light weight jQuery plugin that allows you to create a custom drop down with images and description.

What is so cool about this plugin!

  • Adds images and description to otherwise boring drop downs.
  • Allows JSON to populate the drop down options.
  • Converts your HTML select element to ddSlick.
  • Uses Minimum css and no external stylesheets to download.
  • Supports callback functions on selection.
  • Works as good even without images or description!

View Demo  Download ddslick.js (Version 2.0)
Download uncompressed ddslick.js
ddslick screenshot

Why is this plugin useful

With traditional drop downs i.e. using <select> <option> </option> </select> you are limited to only text and value. But with this easily configurable jquery plugin, you can now create a custom drop down that can very well include images, a short description, along with your usual text and value. Take a look at the following demos in action.

Demos:

1Basic Drop down using JSON

Source: 
$('#demoBasic').ddslick({
    data: ddData,
    width: 300,
    imagePosition: "left",
    selectText: "Select your favorite social network",
    onSelected: function (data) {
        console.log(data);
    }
});

When using JSON to populate, the plugin requires the specific data format. Click here to see the sample JSON data for the plugin.

2Render from HTML select options

Source: 
//Make it slick!
$('#make-it-slick').on('click', function(){
    $('#demo-htmlselect').ddslick();
});

//Restore Original
$('#restore').on('click', function(){
    $('#demo-htmlselect').ddslick('destroy');
});

Use HTML5 data attributes data-imagesrc and data-description with your regular HTML select elements to add images and description. The plugin will retrieve text, value, and selected attributes from the elements itself.
Click here to see the HTML select element for this example.

3GET Selected Dropdown Option

Source: 
$('#demoShowSelected').ddslick({
    data: ddData,
    selectText: "Select your favorite social network",
});

$('#showSelectedData').on('click', function () {
    var ddData = $('#demoShowSelected').data('ddslick');
    displaySelectedData("2: Getting Selected Dropdown Data" , ddData);
});

You may use jquery .data() with your selector to get data from plugin. $('#demoShowSelected').data('ddslick'); will return a js object that contains:

  • selectedIndex (0 based),
  • selectedItem (HTML 'li' element),
  • selectedData (nested object with text, value, description, imageSrc)

4SET selected Dropdown Option

Try an index between 0 to 4

Source: 
$('#demoSetSelected').ddslick({
    data: ddData,
    selectText: "Select your favorite social network"
});

$('#btnSetSelected').on('click', function () {
    var i = $('#setIndex').val();
    if(i >= 0 && i <5)
       $('#demoSetSelected').ddslick('select', {index: i });
    else 
       $('#setIndexMsg').effect('highlight',2400);
});

You may use plugin's select method like $('#demoSetSelected').ddslick('select', {index: i });
to select a particular index.

5Callback Function on Dropdown Selection

Source: 
$('#demoCallback').ddslick({
    data: ddData,
    selectText: "Select your favorite social network",
    onSelected: function(data){
        displaySelectedData("3: Callback Function on Dropdown Selection" , data);
    }
});

Use plugin's onSelected callback function on selecting one of the drop down options. The callback data will include:

  • selectedIndex (0 based),
  • selectedItem (HTML 'li' element),
  • selectedData (nested object with text, value, description, imageSrc)

6Dropdown with default selection

Source: 
$('#demoDefaultSelection').ddslick({
    data: ddData,
    defaultSelectedIndex:2
});

Use Zero based plugin option defaultSelectedIndex to set up plugin to pre select the index, when first initializing.
Note:When there is no selectText the plugin selects the first item index[0] from dropdown options.

7Dropdown with image on right

Source: 
$('#demoImageRight').ddslick({
    data: ddData,
    imagePosition:"right",
    selectText: "Select your favorite social network"
});

You have the flexibility to position image either on left or right using imagePosition, depending on your preference.
Also you can add your own styles to these images by modifying their CSS class .dd-option-image, .dd-selected-image on your page. For e.g. plugin sets the default max-width for images to 64px, that you can overwrite by adding these classes to your page and overwriting max-width style.

8Dropdown with truncated description

Source: 
$('#demoTruncated').ddslick({
    data: ddDataLongDescription,
    selectText: "Select your favorite social network",
    truncateDescription: true,
    onSelected: function(data){
        displaySelectedData("5: Dropdown with truncated description", data);
    }
});

By default plugin will truncate the description in selected view if it overflows. You may however turn the default behavior by setting truncateDescription:false to show the complete description. Either way you still get the complete description with returned selected data. Also use .dd-desc to add your own styles to description.

9Dropdown with no image or description

Source: 
var ddBasic = [
    { text: "Facebook", value: 1, },
    { text: "Twitter", value: 2, },
    { text: "LinkedIn", value: 3, },
    { text: "Foursquare", value: 4, }
];

$('#divNoImage').ddslick({
    data: ddBasic,
    selectText: "Select your favorite social network"
});

The plugin is built to work as beautiful even without images!


How to use with JSON data

  1. Include the plugin javascript file along with jquery: 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://dl.dropbox.com/u/40036711/Scripts/ddslick.js"></script>
  2. Create an empty placeholder for the custom drop down: eg: 
        <div id="myDropdown"></div>
  3. Get the drop down options (JSON Data) to be binded to plugin: 
    //Dropdown plugin data
var ddData = [
    {
        text: "Facebook",
        value: 1,
        selected: false,
        description: "Description with Facebook",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
    },
    {
        text: "Twitter",
        value: 2,
        selected: false,
        description: "Description with Twitter",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
    },
    {
        text: "LinkedIn",
        value: 3,
        selected: true,
        description: "Description with LinkedIn",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
    },
    {
        text: "Foursquare",
        value: 4,
        selected: false,
        description: "Description with Foursquare",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
    }
];
  4. Attach plugin to this placeholder like: 
    $('#myDropdown').ddslick({
    data:ddData,
    width:300,
    selectText: "Select your preferred social network",
    imagePosition:"right",
    onSelected: function(selectedData){
        //callback function: do something with selectedData;
    }   
});
    Note: Use onSelected callback function to do something after the drop down option is selected. The selectedData will contain the selected text, value, description, imageSrc.

How to use with HTML <select> and <option>

  1. Include the plugin javascript file along with jquery: 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://dl.dropbox.com/u/40036711/Scripts/ddslick.js"></script>
  2. Add HTML5 data attributes to your select elements: eg: 
        <select id="demo-htmlselect">
        <option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
            data-description="Description with Facebook">Facebook</option>
        <option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
            data-description="Description with Twitter">Twitter</option>
        <option value="2" selected="selected" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
            data-description="Description with LinkedIn">LinkedIn</option>
        <option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
            data-description="Description with Foursquare">Foursquare</option>
    </select>
  3. Attach plugin to this HTML select element: 
    $('#myDropdown').ddslick({
    onSelected: function(selectedData){
        //callback function: do something with selectedData;
    }   
});

Plugin Options:

  • data default value '[]'
    JSON data to populate drop down plugin options
  • width default value '260'
    Width in px for the drop down plugin i.e. 400, or "400px".
  • height default value 'null'
    Height in px for the drop down options i.e. 300, or "300px". The scroller will automatically be added if options overflows the height.
  • background default value '#eee'
    Background for your drop down. You can use the css shorthand notation for setting backgrounds
    i.e. background: #CCCCCC; or background: transparent url('your-background-image.jpg') no-repeat 0 0 scroll
  • selectText default value 'Select...'
    Set default text to display when no option is selected.
  • imagePosition default value 'left'
    Set positioning of image in your drop down, left or right. See demo 5 above.
  • showSelectedHTML default value 'true'
    Set what to be displayed as selected. Setting false will only display title. Setting true displays title, description and image.
  • defaultSelectedIndex default value 'null'
    Set the default index to be selected when initializing plugin. If not provided then selectText will be displayed. See demo 4 above.
  • truncateDescription default value 'true'
    Truncate the long description when selected. Options however display the full text. The plugin still returns complete description on selection. See demo 6 above.
  • onSelected default value 'function () { }'
    Callback function when an option is selected in the drop down. See demo 3 above.
  • keepJSONItemsOnTop default value 'false'
    You can use both HTML select elements and JSON data to populate your drop down. By default JSON items are added in drop down after the select options.

Plugin Methods:

  • select
    You may use plugin's select method like $('#demoSetSelected').ddslick('select', {index: i });
    to select a particular index. See demo 3 above.
  • select
    You may use plugin's open method like $('#demoSetSelected').ddslick('open');
    to open drop down options.
  • close
    You may use plugin's close method like $('#demoSetSelected').ddslick('close');
    to close drop down options.
  • destroy
    You may use plugin's destroy method to restore to original element like $('#demoSetSelected').ddslick('destroy');
    If you had selected an option with ddSlick, the selected attribute will be passed to the original HTML select, so you don't loose the selection. This will also unbind any event handlers attached by plugin to this control. See demo 2 above.

Coming soon! Keyboard arrow support.