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.

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

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

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>