Dropdown

Creates a select box with a drop-down menu.

HTML	<div cordysType="wcp.library.ui.Dropdown" id=dropdownID> <div> ... </div> </div>

The Dropdown component consists of a collection of <DIV> tags with cordysType wcp.library.ui.Dropdown. Each <div> tag represents an option. The component can be used to display a list of items in a select box. The users can then select the item from the list for their own use.

To dynamically add and initialize this component, you can use the initializeHTMLElements or addType methods of the Application object.

The properties, methods, and events defined for this component are as follows:

Attribute	Property	Description
editable		Specifies whether the Dropdown is editable or not. Editable allows for adding a single option to the dropdown by the user. true: Dropdown is editable. To edit the content in the dropdown, select the element to edit, and click the element to get the cursor inside it. Then the value can be typed in. In this manner a maximum of one option can be added. false: Default. Dropdown is not editable.
enabled	N/A	Sets the enabled property that denotes whether the dropdown is enabled or not. The values can be: true: Default. Dropdown is enabled. false: Dropdown is disabled.
mode	N/A	Allows for fast rendering of many fields with the same options. The dropdown itself is not visible. The registerHTML() method binds the dropdown to input or div nodes. When user puts the focus on the node, the input or div is transformed into a dropdown. Especially handy for tables, where many rows have the same dropdown.
default		Default. Performance mode is disabled. Dropdown responds like standard dropdown.
performance		Dropdown is hidden by default, but is shown on the field which gets the focus and is registered (registerHTML).
options	options	Array that retrieves the collection of DIV objects in a dropdown.

Method	Description
add	Adds an option to the Dropdown. Adding an option can be done either by passing an option node, or by passing a string and a value.
getEditable()	Gets the value of the editable property.
getEnabled()	Gets the value of the enabled property.
getMaximumHeight()	Gets the maximum height of the dropdown in pixels. The height of the dropdown is automatically adjusted to the number of options. However, it never exceeds the maximum height. The default value is 150.
getOptions()	Returns an array with all the options available.
getSelectValue()	Gets the value of the selected option.
registerHTML(node)	Registers the node parameter with the dropdown. The node is either a div or an input. The node will be displayed as a dropdown when the node gets the focus. This method can only be used when the property mode is set to performance. node: the input or div node to be displayed as a dropdown. The node must look like: <div value="myValue">myDescription</div> or <input _xValue="myValue" value="myDesc"/>
remove(iOption)	Removes an element from the dropdown. iOption is a required parameter that denotes the index of the element or the option node that is to be removed. iOption: Required: the index of the option to be removed, OR the option node itself.
removeAll()	Clears all the options in the dropdown.
resizeToContent()	Resizes the dropdown to the size of the largest option.
setEditable(bEditable)	Specifies whether the dropdown is editable or not. true - Dropdown is editable. To edit the content in the dropdown, select the element to edit, and click the element to get the cursor inside it. Then the value can be typed in. false - (Default) Dropdown is not editable.
setEnabled(bEnabled)	Sets the enabled property that denotes whether the dropdown is enabled or not. bEnabled : Required. The values can be: true: Default. Dropdown is enabled. false: Dropdown is disabled.
setMaximumHeight(iHeight)	Sets the maximum height of the dropdown in pixels. The height of the dropdown is automatically adjusted to the number of options. However, it never exceeds the maximum height. This method is only available for dropdown lists. iHeight: Required: the maximum height of the dropdown in pixels. Default maximum height is 150.
setSelectedIndex(iIndex)	Selects the option with the index passed. iIndex: Required. When set to -1 all options are unselected. When an index is passed larger than the number of options, the last option is selected.
setSelectValue(iValue)	Selects the first option with the passed value. iValue: Required: value of an option.
sort(property,bAscending)	Sorts the options in the control. property: Refers to any attribute of the option. The default value is the option's description. bAscending: Boolean that indicates the sorting order. Possible values are:true: Sorts in the ascending order. false: Default. Sorts in the descending order.
unregisterHTML(node)	Unregisters the node parameter from the dropdown. This method can only be used when the property mode is set to performance.node: Required. The input or div node which is registered to the dropdown.

Event	Description
onchange	Fires when the contents of the object selected have changed.
onselectchange	Fires before the contents of the object selected are changed.

The following keys are supported to provide easy navigation to the user in the dropdown.

[arrow-up]: Selects previous option (when dropdown is closed or open).
[arrow-down]: Selects next option (when dropdown is closed or open).
Alt + [arrow-up]: Closes the dropdown.
Alt + [arrow-down]: Opens the dropdown.
Tab: Closes the dropdown, focus shifts to the next field.
Enter: Closes the dropdown , focus remains with the dropdown.
Esc: Closes the dropdown, focus remains with the dropdown.
[a-z]/[0-9]: Selects the option which starts with this letter. Applicable when the editable property is set to false.
Page Up: Selects and scrolls to the top option so that selected option is shown in the visible dropdown items list.
Page Down: Selects and scrolls to the bottom option so that selected option is shown in the visible dropdown items list.

The drop-down list appears when you click the button or the drop-down arrow. Placing the cursor over an option highlights the option. Clicking an option selects it, and closes the drop-down.

Note:
This component deprecates the select component. The component can be used as a replacement to the Microsoft's SELECT component because the SELECT component is a window control. Using a window control will make the control appear above all the HTML controls even if the z-index property is set to a higher value.

The following example shows the usage of the behavior:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
    <head>
        <title>dropdown Demo</title>
		<script type="text/javascript" src="/cordys/wcp/application.js"></script>
		<script type="text/javascript">
			function setOnChange(eventObject)
			{
				selectFruits.onchange = cordys.getEventTarget(eventObject).checked == true ? alertInfo : null;
			}
			function addItem()
			{
				var itemName = prompt("Enter a name for the item", "Mango");
				if (itemName)
				{
					var itemValue = prompt("Enter a value for the item", "50");
					if (itemValue)
					{
						selectFruits.add(itemName, itemValue);
						application.notify("Added '" + itemName + "'!");
					}
				}
			}
			function removeItem()
			{
				var itemIndex = prompt("Enter the index of the item to remove", 2);
				var option = selectFruits.getOptions()[itemIndex];
				if (! option)
				{
					application.notify("An option with index " + itemIndex + " does not exist!");
					return;
				}
				var itemName = cordys.getTextContent(option);
				if (itemIndex)
				{
					selectFruits.remove(itemIndex);
					application.notify("Removed '" + itemName + "'!");
				}
			}
			function getOptions()
			{
				var selectOptions = selectFruits.getOptions();
				var str = "Select Options: \n\n";
				for (var I=0 ; I < selectOptions.length ; I++)
				{
					str += selectOptions[i].innerHTML + ", \n";
				}
				application.notify(str);
			}
			function alertInfo()
			{
				var alertText = "Element Information: \n\n";
				var index = selectFruits.getSelectedIndex();
				alertText += "Selected Index : " + index + ", \n";
				alertText += "Option : " + selectFruits.getOptions()[index].innerHTML + ", \n";
				alertText += "Text : " + cordys.getTextContent(selectFruits.getSelectedOptions()[0]) + ", \n";
				alertText += "Value : " + selectFruits.getSelectValue();
				application.notify(alertText);
			}
		</script>
    </head>
    <body style="margin:30px">
		<h4>Dropdown Component</h4>
		<br />
		<br />
		Dropdown Box :
		<div cordysType="wcp.library.ui.Dropdown" id="selectFruits" style="width:200px">
			<div value="10" selected="true">Apple</div>
			<div value="20">Pear</div>
			<div value="30">Durian</div>
			<div value="40">Jackfruit</div>
		</div>
		<br />
		<input type="checkbox" onchange="setOnChange(event)" />
		Notify "onchange"
		<br />
		<br />
		<button class="medium" style="width:100px" onclick="addItem()">Add</button>
		<button class="medium" style="width:100px" onclick="removeItem()">Remove</button>
		<button class="medium" style="width:100px" onclick="getOptions()">Options</button>
    </body>
</html>

Note
The dropdown control provides APIs to retrieve information about the options available in the dropdown menu. Use the following API to obtain the number of options in a dropdown menu:

dropdown1.getOptions().length

pp108 : Dropdown

Dropdown

Syntax

Table 1. List of Attributes

Table 2. List of Methods

Table 3. List of Events

Key-control

Mouse-control

Example