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 created 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
    enableCheckbox:false, //this needs to multiple or it will set element to multiple
    checkboxNameSuffix:'_mscheck',
    append:'',
    prepend:'',
    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. 
//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.

 
oDropdown.remove(2);
namedItem uiData Object Get the option element if there is name defined. 
var data = oDropdown.namedItem("shopping");
item uiData Object Get the item specified by an index. Please refer above for uiData. 
var data = oDropdown.namedItem("shopping");
set   Set the element property. 
oDropdown.set("selectedIndex", 2);
get   Get the element property. 
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. 
oDropdown.visible(true); //shows if hidden
oDropdown.visible(false); //hide
var isVisible = oDropdown.visible(); //returns current states
close   Closes the msDropdown. 
oDropdown.close();
open   Opens the msDropdown. 
oDropdown.open();
showRows   Used to set the visible rows.
visibleRows 
oDropdown.visibleRows(10);
on   Add an events on element. 
oDropdown.on("change", function(res) {console.log(res)});
off   Remove an events on element. 
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. 
oDropdown.act("add", new Option("Lucky"));
oDropdown.act("remove", 1);
var opt = oDropdown.act("namedItem", "calendar");
setIndexByValue   Set index by value. (v 3.2) 
oDropdown.setIndexByValue("calendar");
destory   Restore the original dorpdown. 
oDropdown.destory()