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 is supported since Tizen 2.3.

Table of Contents

  1. Default Selector
  2. Manual Constructor
  3. HTML Examples
  4. Options
  5. 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

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.
data-label boolean false Sets whether the select menu component is of a label or normal type.

Methods

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

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

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.close();
</script>