You are here

Home » API reference » Language Switcher Dropdown 7

Javascript image dropdown - Documentation in Language Switcher Dropdown 7

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

 

File

msdropdown/examples/help.html
View source 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript image dropdown - Documentation</title>
<link rel="stylesheet" href="css/sample.css" />
<script src="../js/jquery/jquery-1.9.0.min.js"></script>
<!-- <msdropdown> -->
<link rel="stylesheet" type="text/css" href="../css/msdropdown/dd.css" />
<script src="../js/msdropdown/jquery.dd.min.js"></script>
<!-- </msdropdown> -->
<style type="text/css">
code.blue1 {color:#3300FF}
table.help {background:#fff; color:#000;}
.help td.title {background:#333; color:#fff; font-weight:bold}
.help td.title1 {background:#0099bf; color:#fff; font-weight:bold}
table.help{background:#c3c3c3; color:#000;}
table.help  td{background:#fff;color:#000}
pre{color:#000; background:#f2f2f2; padding:0 10px; max-width:80%; overflow:auto}
code.blue{color:#3300FF}

</style>
</head>
<body>
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="topmenu">
  <tr>
    <td colspan="2" class="top"><h1>Javascript image dropdown <span id="ver"></span> <a title="Download" href="http://www.marghoobsuleman.com/jquery-image-dropdown" class="small">Download</a></h1></td>
  </tr>
  <tr>
    <td width="25%"><select style="width:250px"  name="pages" id="pages">
      <option value="" selected="selected">Choose a sample page</option>
      <option value="index.html">Normal</option>
      <option value="byjson.html">By Json Data</option>
      <option value="multiple-skin.html">Multiple Skin</option>
      <option value="css-sprite.html">CSS Sprite</option>
      <option value="object-oriented-approach.html">Object Oriented Approach</option>
      <option value="object-oriented-approach-more.html">Object Oriented Approach - More</option>
      <option value="use-checkbox.html">Use Checkbox</option>
      <option value="mouse-events.html">Mouse Events</option>
      <option value="help.html">Documentation</option>
    </select></td>
    <td align="left"><a href="help.html">Documentation</a></td>
  </tr>
</table>
<form action="submitdata.php" method="post" enctype="multipart/form-data" name="frmdata">
  <table width="100%" border="0" cellspacing="1" cellpadding="5" class="help">
    <tr>
      <td colspan="3">&nbsp;</td>
    </tr>
    <tr>
      <td width="18%" class="title1"><strong>Properties</strong></td>
      <td width="8%">&nbsp;</td>
      <td width="74%"><strong>Please note:</strong> For setting properties. Please use <code class="blue1">set()</code> method. </td>
    </tr>
    <tr>
      <td class="title">Name</td>
      <td class="title">Type</td>
      <td class="title">Description</td>
    </tr>
    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>To check if  control is disabled or not. If it is disabled, it does not accept clicks.</td>
    </tr>
    <tr>
      <td>form</td>
      <td>HTMLFormElement</td>
      <td>Get the current associated form element.</td>
    </tr>
    <tr>
      <td>length</td>
      <td> number</td>
      <td>The number of <code class="blue1">&lt;option&gt;</code> elements in this select element.</td>
    </tr>
    <tr>
      <td>multiple</td>
      <td> boolean</td>
      <td>Get the curernt state of the control, which indicates whether multiple items can be selected.</td>
    </tr>
    <tr>
      <td>name</td>
      <td>string</td>
      <td>Get the name of the control.</td>
    </tr>
    <tr>
      <td>options</td>
      <td> HTMLOptionsCollection</td>
      <td>Get the all <code class="blue1">&lt;option&gt;</code> elements. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td>selectedIndex</td>
      <td>number</td>
      <td>The index of the first selected <code class="blue1">&lt;option&gt;</code> element.</td>
    </tr>
    <tr>
      <td>selectedOptions</td>
      <td>HTMLOptionsCollection</td>
      <td>The set of options that are selected. Returns as an array.</td>
    </tr>
    <tr>
      <td>size</td>
      <td> number</td>
      <td>Get the size of the element. which contains the number of visible items in the control. </td>
    </tr>
    <tr>
      <td>type</td>
      <td>string</td>
      <td>Get the  control's type. When multiple is true, it returns select-multiple; otherwise, it returns select-one. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td>value</td>
      <td>string</td>
      <td>The value of this select control, that is, of the first selected option.</td>
    </tr>
    <tr>
      <td>selectedText</td>
      <td>string</td>
      <td>Get the current selected text. </td>
    </tr>
    <tr>
      <td>uiData</td>
      <td>object</td>
      <td valign="top"><p>Returns the following data.<br />
        data:{className,description,image,text,title,value}<br />
        index: 	 Number <br />
        option: 	HTMLOptionElement <br />
        ui: LI Object</p></td>
    </tr>
    <tr>
      <td colspan="3">And all  available  properties can be accessed from this control. i.e. children etc.</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">Reaad only properties can't be set by <code class="blue1">set()</code> method.</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td class="title1"><strong>Public Methods</strong></td>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3"><pre>
<span style='color:#696969; '>//create msDropdown</span>
<span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
<span style='color:#696969; '>//or by jsondata</span>
<span style='color:#800000; font-weight:bold; '>var</span> jsonData <span style='color:#808030; '>=</span> <span style='color:#808030; '>[</span>                    
                <span style='color:#800080; '>{</span>description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Choos your payment gateway'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>''</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Payment Gateway'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>                    
                <span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Amex-56.png'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'My life. My card...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'amex'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Amex'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>
                <span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Discover-56.png'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'It pays to Discover...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Discover'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Discover'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>
                <span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Mastercard-56.png'</span><span style='color:#808030; '>,</span> title<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'For everything else...'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'For everything else...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Mastercard'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Mastercard'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>
                <span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Cash-56.png'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Sorry not available...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'cash'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Cash on devlivery'</span><span style='color:#808030; '>,</span> disabled<span style='color:#800080; '>:</span><span style='color:#0f4d75; '>true</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>
                <span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Visa-56.png'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'All you need...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Visa'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Visa'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>
                <span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Paypal-56.png'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Pay and get paid...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Paypal'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Paypal'</span><span style='color:#800080; '>}</span>
                <span style='color:#808030; '>]</span><span style='color:#800080; '>;</span>
<span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#800080; '>{</span>byJson<span style='color:#800080; '>:</span><span style='color:#800080; '>{</span>data<span style='color:#800080; '>:</span>jsonData<span style='color:#808030; '>,</span> name<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'payments'</span><span style='color:#800080; '>}</span><span style='color:#800080; '>}</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
//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
}
</pre></td>
    </tr>
    <tr>
      <td>add</td>
      <td>&nbsp;</td>
      <td>Adds an option element to the select element.</td>
    </tr>
    <tr>
      <td colspan="3">
      <pre style='color:#000000;background:#ffffff;'><span style='color:#696969; '><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
//by traditional option tag</span>
oDropdown<span style='color:#808030; '>.</span>add<span style='color:#808030; '>(</span><span style='color:#800000; font-weight:bold; '>new</span> Option<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>Calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> <span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#696969; '>//or by string</span>
oDropdown<span style='color:#808030; '>.</span>add<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>Calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#696969; '>//or by json</span>
oDropdown<span style='color:#808030; '>.</span>add<span style='color:#808030; '>(</span><span style='color:#800080; '>{</span>text<span style='color:#800080; '>:</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>Calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#800080; '>}</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#696969; '>//or by json with all properties</span>
oDropdown<span style='color:#808030; '>.</span>add<span style='color:#808030; '>(</span><span style='color:#800080; '>{</span>text<span style='color:#800080; '>:</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>Calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Set my calendar'</span><span style='color:#808030; '>,</span> image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'/images/calendar.gif'</span><span style='color:#808030; '>,</span> className<span style='color:#800080; '>:</span><span style='color:#0000e6; '>''</span> title<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Calendar'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
  	</pre>
  </td>
    </tr>
    <tr>
      <td>remove</td>
      <td>&nbsp;</td>
      <td><p>Removes the option element at the specified index from the select element.</p></td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'>
<span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>remove<span style='color:#808030; '>(</span><span style='color:#008c00; '>2</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
</pre></td>
    </tr>
    <tr>
      <td>namedItem</td>
      <td>uiData Object</td>
      <td>Get the option element if there is name defined. </td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
<span style='color:#800000; font-weight:bold; '>var</span> data <span style='color:#808030; '>=</span> oDropdown<span style='color:#808030; '>.</span>namedItem<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>shopping</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
</pre></td>
    </tr>
    <tr>
      <td>item</td>
      <td>uiData Object</td>
      <td>Get the item specified by an index. Please refer above for uiData.</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
<span style='color:#800000; font-weight:bold; '>var</span> data <span style='color:#808030; '>=</span> oDropdown<span style='color:#808030; '>.</span>namedItem<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>shopping</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
</pre></td>
    </tr>
    <tr>
      <td>set</td>
      <td>&nbsp;</td>
      <td>Set the element property.</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>set<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>selectedIndex</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> <span style='color:#008c00; '>2</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
</pre></td>
    </tr>
    <tr>
      <td>get</td>
      <td>&nbsp;</td>
      <td>Get the element property.</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
<span style='color:#800000; font-weight:bold; '>var</span> <span style='color:#797997; '>index</span> <span style='color:#808030; '>=</span> oDropdown<span style='color:#808030; '>.</span>get<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>selectedIndex</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#696969; '>//You can get the property without using get method</span>
<span style='color:#800000; font-weight:bold; '>var</span> <span style='color:#797997; '>index</span> <span style='color:#808030; '>=</span> oDropwdown<span style='color:#808030; '>.</span>selectedIndex<span style='color:#800080; '>;</span>
  </pre></td>
    </tr>
    <tr>
      <td>visible</td>
      <td>boolean/void</td>
      <td>Set and get the visible states.</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>visible<span style='color:#808030; '>(</span><span style='color:#0f4d75; '>true</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> <span style='color:#696969; '>//shows if hidden</span>
oDropdown<span style='color:#808030; '>.</span>visible<span style='color:#808030; '>(</span><span style='color:#0f4d75; '>false</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> <span style='color:#696969; '>//hide</span>
<span style='color:#800000; font-weight:bold; '>var</span> isVisible <span style='color:#808030; '>=</span> oDropdown<span style='color:#808030; '>.</span>visible<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> <span style='color:#696969; '>//returns current states</span>
  </pre></td>
    </tr>
    <tr>
      <td>close</td>
      <td>&nbsp;</td>
      <td>Closes the  msDropdown.</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>close<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span></pre></td>
    </tr>
    <tr>
      <td>open</td>
      <td>&nbsp;</td>
      <td>Opens the msDropdown. </td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>open<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> </pre></td>
    </tr>
    <tr>
      <td>showRows</td>
      <td rowspan="2">&nbsp;</td>
      <td rowspan="2">Used to set the visible rows.</td>
    </tr>
    <tr>
      <td>visibleRows</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>visibleRows<span style='color:#808030; '>(</span><span style='color:#008c00; '>10</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
  </pre></td>
    </tr>
    <tr>
      <td>on</td>
      <td>&nbsp;</td>
      <td>Add an events on element. </td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>on<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>change</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> <span style='color:#800000; font-weight:bold; '>function</span><span style='color:#808030; '>(</span>res<span style='color:#808030; '>)</span> <span style='color:#800080; '>{</span>console<span style='color:#808030; '>.</span><span style='color:#800000; font-weight:bold; '>log</span><span style='color:#808030; '>(</span>res<span style='color:#808030; '>)</span><span style='color:#800080; '>}</span><span style='color:#808030; '>);</span></pre></td>
    </tr>
    <tr>
      <td>off</td>
      <td>&nbsp;</td>
      <td>Remove an events on element.</td>
    </tr>
    <tr>
      <td colspan="3"><span style="color:#000000;background:#ffffff;">
        <pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>off<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>change</span><span style='color:#800000; '>&quot;</span><span style='color:#800080; '></span><span style='color:#808030; '>)</span>;</pre></td>
    </tr>
    <tr>
      <td>getData</td>
      <td>uiData</td>
      <td>Get the current selected uiData object.</td>
    </tr>
    <tr>
      <td colspan="3">var uiData = <span style="color:#000000;background:#ffffff;">oDropdown</span>.getData();</td>
    </tr>
    <tr>
      <td>act</td>
      <td>&nbsp;</td>
      <td>For everything else. You can call any exisitng method via this single method.</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>act<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>add</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> <span style='color:#800000; font-weight:bold; '>new</span> Option<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>Lucky</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>act<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>remove</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> <span style='color:#008c00; '>1</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#800000; font-weight:bold; '>var</span> opt <span style='color:#808030; '>=</span> oDropdown<span style='color:#808030; '>.</span>act<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>namedItem</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> <span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span></pre></td>
    </tr>
    <tr>
      <td>setIndexByValue</td>
      <td>&nbsp;</td>
      <td>Set index by value. (v 3.2)</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown.setIndexByValue(<span style='color:#008c00; '>"calendar"</span><span style='color:#808030; '>);</pre></td>
    </tr>
    <tr>
      <td>destroy</td>
      <td>&nbsp;</td>
      <td>Restore the original dorpdown.</td>
    </tr>
    <tr>
      <td colspan="3"><span style="color:#000000;background:#ffffff;">
        <pre style='color:#000000;background:#ffffff;'>
<span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>destroy<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span></pre></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>refresh</td>
      <td>&nbsp;</td>
      <td>Refresh the msdropdown UI and value based on original dropdown.</td>
    </tr>
    <tr>
      <td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>#element<span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>refresh<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span>; //or
document.getElmentById(&quot;element&quot;).refresh();</pre></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
<p>&nbsp;</p>

<script>
$(document).ready(function(e) {
	//no use
	try {
		var pages = $("#pages").msDropdown({on:{change:function(data, ui) {
												var val = data.value;
												if(val!="")
													window.location = val;
											}}}).data("dd");

		var pagename = document.location.pathname.toString();
		pagename = pagename.split("/");
		pages.setIndexByValue(pagename[pagename.length-1]);
		$("#ver").html(msBeautify.version.msDropdown);
	} catch(e) {
		//console.log(e);	
	}
	
	$("#ver").html(msBeautify.version.msDropdown);
});
</script>

</body>
</html>