New Version 4.0.x is available

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();