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. |
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.
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>
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>
You can declare the SelectMenu type manually. If you set the data-label
attribute to true
(default is false
), the select menu has a label type. The size of the label type is inherited by its parent element.
<div style="width:300px; height:150px;"> <select id="selectmenu" data-native-menu="false" data-label="true"> <option value="1">Item1</option> <option value="2">Item2</option> <option value="3">Item3</option> <option value="4">Item4</option> </select> </div>
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>
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>
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. |
To call a method on the component, use one of the existing APIs:
var element = document.getElementById("selectmenu"), widget = tau.widget.SelectMenu(element); widget.methodName(methodArgument1, methodArgument2, ...);
$(".selector").selectmenu("methodName", methodArgument1, methodArgument2, ...);
Method | Description |
---|---|
open ( ) |
Opens the select menu. |
close ( ) |
Closes the select menu. |
open
Opens the select menu.
open ( )
Return value:
No return valueCode 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 valueCode 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>