# Javascript image dropdown - Documentation

# Javascript image dropdown Download

| Documentation

Properties |  | Please note: For setting properties. Please use `set()` method.
Name | Type | Description
disabled | boolean | To check if control is disabled or not. If it is disabled, it does not accept clicks.
form | HTMLFormElement | Get the current associated form element.
length | number | The number of `<option>` elements in this select element.
multiple | boolean | Get the curernt state of the control, which indicates whether multiple items can be selected.
name | string | Get the name of the control.
options | HTMLOptionsCollection | Get the all `<option>` elements. Read only.
selectedIndex | number | The index of the first selected `<option>` element.
selectedOptions | HTMLOptionsCollection | The set of options that are selected. Returns as an array.
size | number | Get the size of the element. which contains the number of visible items in the control.
type | string | Get the control's type. When multiple is true, it returns select-multiple; otherwise, it returns select-one. Read only.
value | string | The value of this select control, that is, of the first selected option.
selectedText | string | Get the current selected text.
uiData | object | Returns the following data. data:{className,description,image,text,title,value} index: Number option: HTMLOptionElement ui: LI Object
And all available properties can be accessed from this control. i.e. children etc.
| Reaad only properties can't be set by `set()` method.
Public Methods |

    //create msDropdown
    var oDropdown = $("#element").msDropdown().data("dd");
    //or by jsondata
    var jsonData = [
                    {description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
                    {image:'../images/msdropdown/icons/Amex-56.png', description:'My life. My card...', value:'amex', text:'Amex'},
                    {image:'../images/msdropdown/icons/Discover-56.png', description:'It pays to Discover...', value:'Discover', text:'Discover'},
                    {image:'../images/msdropdown/icons/Mastercard-56.png', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
                    {image:'../images/msdropdown/icons/Cash-56.png', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
                    {image:'../images/msdropdown/icons/Visa-56.png', description:'All you need...', value:'Visa', text:'Visa'},
                    {image:'../images/msdropdown/icons/Paypal-56.png', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
                    ];
    var oDropdown = $("#element").msDropdown({byJson:{data:jsonData, name:'payments'}}).data("dd");
    //Some usefull parameters can be passed while creating msDropdown.
    //These are default values.
    {
        {byJson: {data: null, selectedIndex: 0, name: null, size: 0, multiple: false, width: 250}, //if you want to create by json data
        mainCSS: 'dd',
        visibleRows: 7,
        rowHeight: 0,
        showIcon: true,
        zIndex: 9999,
        useSprite: false,
        animStyle: 'slideDown',
        event:'click', //it can be mouseover
        openDirection: 'auto', //auto || alwaysUp || alwaysDown
        enableCheckbox:false, //this needs to multiple or it will set element to multiple
        checkboxNameSuffix:'_mscheck',
        append:'',
        prepend:'',
        reverseMode:true, //it will update the msdropdown UI/value if you update the original dropdown - will be usefull if are using knockout.js or playing with original dropdown
        roundedCorner:true, //to have rounded corner
        enableAutoFilter:true, //to enable autofilter
        on: {create: null,open: null,close: null,add: null,remove: null,change: null,blur: null,click: null,
        	dblclick: null,mousemove: null,mouseover: null,mouseout: null,focus: null,mousedown: null,mouseup: null} //event cant be added from here too
    }

add |  | Adds an option element to the select element.

    var oDropdown = $("#element").msDropdown().data("dd");
    //by traditional option tag
    oDropdown.add(new Option("Calendar", "calendar"));
    //or by string
    oDropdown.add("Calendar");
    //or by json
    oDropdown.add({text:"Calendar", value:"calendar"});
    //or by json with all properties
    oDropdown.add({text:"Calendar", value:"calendar", description:'Set my calendar', image:'/images/calendar.gif', className:'' title:'Calendar'});

remove |  | Removes the option element at the specified index from the select element.

    var oDropdown = $("#element").msDropdown().data("dd");
    oDropdown.remove(2);

namedItem | uiData Object | Get the option element if there is name defined.

    var oDropdown = $("#element").msDropdown().data("dd");
    var data = oDropdown.namedItem("shopping");

item | uiData Object | Get the item specified by an index. Please refer above for uiData.

    var oDropdown = $("#element").msDropdown().data("dd");
    var data = oDropdown.namedItem("shopping");

set |  | Set the element property.

    var oDropdown = $("#element").msDropdown().data("dd");
    oDropdown.set("selectedIndex", 2);

get |  | Get the element property.

    var oDropdown = $("#element").msDropdown().data("dd");
    var index = oDropdown.get("selectedIndex");
    //You can get the property without using get method
    var index = oDropwdown.selectedIndex;

visible | boolean/void | Set and get the visible states.

    var oDropdown = $("#element").msDropdown().data("dd");
    oDropdown.visible(true); //shows if hidden
    oDropdown.visible(false); //hide
    var isVisible = oDropdown.visible(); //returns current states

close |  | Closes the msDropdown.

    var oDropdown = $("#element").msDropdown().data("dd");
    oDropdown.close();

open |  | Opens the msDropdown.

    var oDropdown = $("#element").msDropdown().data("dd");
    oDropdown.open();

showRows |  | Used to set the visible rows.
visibleRows

    var oDropdown = $("#element").msDropdown().data("dd");
    oDropdown.visibleRows(10);

on |  | Add an events on element.

    var oDropdown = $("#element").msDropdown().data("dd");
    oDropdown.on("change", function(res) {console.log(res)});

off |  | Remove an events on element.

    var oDropdown = $("#element").msDropdown().data("dd");
    oDropdown.off("change");

getData | uiData | Get the current selected uiData object.
var uiData = oDropdown.getData();
act |  | For everything else. You can call any exisitng method via this single method.

    var oDropdown = $("#element").msDropdown().data("dd");
    oDropdown.act("add", new Option("Lucky"));
    oDropdown.act("remove", 1);
    var opt = oDropdown.act("namedItem", "calendar");

setIndexByValue |  | Set index by value. (v 3.2)

    var oDropdown = $("#element").msDropdown().data("dd");
    oDropdown.setIndexByValue("calendar");

destroy |  | Restore the original dorpdown.

    var oDropdown = $("#element").msDropdown().data("dd");
    oDropdown.destroy()

refresh |  | Refresh the msdropdown UI and value based on original dropdown.

    var oDropdown = $("#element").msDropdown().data("dd");
    oDropdown.refresh(); //or
    document.getElmentById("element").refresh();