Select Menu

The select menu component allows you to create the component in the form of a drop-down list and manage its operation.

Note
This component has been DEPRECATED since Tizen 2.4 and will be deleted in Tizen 3.0. To support Backward compatibility, please import tau.support-2.3.js.
Since 2.4, this component has been renamed to DropdownMenu. To use this component, please refer DropdownMenu component.

Note
This component is supported since Tizen 2.3.

Default Selector
Manual Constructor
HTML Examples
Options
Methods

Default Selector

By default, all <select> elements are displayed as Tizen Web UI SelectMenu components. The data-native-menu="false" attribute uses a custom drop-down list to select options.

Manual Constructor

To manually create a select menu component, use the component constructor:

<select id="selectmenu" data-native-menu="false">
   <option value="1">Item1</option>
   <option value="2">Item2</option>
   <option value="3">Item3</option>
   <option value="4">Item4</option>
</select>
<script>
   var element = document.getElementById("selectmenu"),
       widget = tau.widget.SelectMenu(element);
</script>

HTML Examples

Creating a select menu

The default value of the data-native-menu attribute is true and it creates a native SelectMenu. You can create a custom SelectMenu by setting the attribute to false.

<select data-native-menu="false">
   <option value="1">Item1</option>
   <option value="2">Item2</option>
   <option value="3">Item3</option>
   <option value="4">Item4</option>
</select>

Setting the inline type

When the data-inline attribute is set to true, the select menu width is determined by its text (default is false).

<select id="selectmenu" data-native-menu="false" data-inline="true">
   <option value="1">Item1</option>
   <option value="2">Item2</option>
   <option value="3">Item3</option>
   <option value="4">Item4</option>
</select>

Using placeholder options
If you use the <option> element with the data-placeholder="true" attribute, you can make a default placeholder. The default value of the data-hide-placeholder-menu-items attribute is true, and it hides the data-placeholder option. To keep the option visible, use the data-hide-placeholder-menu-items="false" attribute.
```
<select id="selectmenu" data-native-menu="false" data-hide-placeholder-menu-items="false">
   <option value="choose-one" data-placeholder="true">Choose an option</option>
   <option value="1">Item1</option>
   <option value="2">Item2</option>
   <option value="3">Item3</option>
   <option value="4">Item4</option>
</select>
```

Options

The following table lists the options for the select menu component.

Option	Input type	Default value	Description
data-native-menu	boolean	true	Sets whether the select menu component is of a native or custom type.
data-hide-placeholder-menu-items	boolean	true	Hides or reveals the placeholder option in the drop-down list of the select menu.
data-inline	boolean	false	Sets whether the select menu component is of an inline or normal type.

Methods

To call a method on the component, use one of the existing APIs:

TAU API (RECOMMENDED):

var element = document.getElementById("selectmenu"),
    widget = tau.widget.SelectMenu(element);
widget.methodName(methodArgument1, methodArgument2, ...);

jQuery API (support for backward compatibility):

$(".selector").selectmenu("methodName", methodArgument1, methodArgument2, ...);

Summary

Method	Description
open()	Opens the select menu.
close()	Closes the select menu.

open

Opens the select menu.

open()

Return value:

No return value

Code example:

<select id="selectmenu" data-native-menu="false">
   <option value="1">Item1</option>
   <option value="2">Item2</option>
   <option value="3">Item3</option>
   <option value="4">Item4</option>
</select>
<script>
   var elSelectMenu = document.getElementById("selectmenu"),
       widget = tau.widget.SelectMenu(elSelectMenu);
   widget.open();
</script>

close

Closes the select menu.

close()