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

Plugin requires specific JSON data format to populate dropdown options. Click here to see the sample JSON data for the plugin .

$('#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)

$('#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.

$('#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)

$('#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.

$('#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.

$('#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.