ddSlick jQuery Plugin Demos

1 Basic dropdown 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.

2 Render 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.

3 GET 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)

4 SET selected dropdown option

Try an index between 0 to 3

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.

5 onSelected callback function

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)

6 Dropdown 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.

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

8 Dropdown 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.

9 Dropdown 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/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/jsmodules/ddslick/master/dist/jquery.ddslick.min.js" ></script>
    
  2. Create an empty placeholder for the custom dropdown: eg:
    <div id="myDropdown"></div>
    
  3. Get the dropdown 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://i.imgur.com/XkuTj3B.png"
        },
        {
            text: "Twitter",
            value: 2,
            selected: false,
            description: "Description with Twitter",
            imageSrc: "http://i.imgur.com/8ScLNnk.png"
        },
        {
            text: "LinkedIn",
            value: 3,
            selected: true,
            description: "Description with LinkedIn",
            imageSrc: "http://i.imgur.com/aDNdibj.png"
        },
        {
            text: "Foursquare",
            value: 4,
            selected: false,
            description: "Description with Foursquare",
            imageSrc: "http://i.imgur.com/kFAk2DX.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 dropdown 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/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/jsmodules/ddslick/master/dist/jquery.ddslick.min.js" ></script>
    
  2. Add HTML5 data attributes to your select elements: eg:
    <select id="demo-htmlselect">
        <option value="0" data-imagesrc="http://i.imgur.com/XkuTj3B.png"
            data-description="Description with Facebook">Facebook</option>
        <option value="1" data-imagesrc="http://i.imgur.com/8ScLNnk.png"
            data-description="Description with Twitter">Twitter</option>
        <option value="2" selected="selected" data-imagesrc="http://i.imgur.com/aDNdibj.png"
            data-description="Description with LinkedIn">LinkedIn</option>
        <option value="3" data-imagesrc="http://i.imgur.com/kFAk2DX.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 dropdown plugin options
  • width default value "260"
    Width in px for the dropdown plugin i.e. 400, or "400px".
  • height default value "null"
    Height in px for the dropdown options i.e. 300, or "300px". The scroller will automatically be added if options overflows the height.
  • background default value "#eee"
    Background for your dropdown. 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 dropdown, 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 dropdown. See demo 3 above.
  • keepJSONItemsOnTop default value "false"
    You can use both HTML select elements and JSON data to populate your dropdown. By default JSON items are added in dropdown 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 dropdown options.
  • close
    You may use plugin’s close method like $("#demoSetSelected").ddslick("close");
    to close dropdown 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.