Select Menu

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

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.

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

open (  ) 

close (  ) 

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>