Dropdown Menu

The Dropdown 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 selectors
  2. Manual constructor
  3. HTML Examples
  4. Options
  5. Methods

Default Selector

By default, all select elements are changed to Dropdown Menu. Additionally elements with data-native-menu=false will use custom popups for option selection.

Manual constructor

For manual creation of DropdownMenu component, use constructor of component.

    <select id="dropdownmenu" 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("dropdownmenu"),
            widget = tau.widget.DropdownMenu(element);
    </script>

HTML Examples

Basic

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

Inline type

When data-inline attribute is set to true, width of the Dropdown Menu is determined by its text.

<select id="dropdownmenu" 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>

With Placeholder

If you use <option> with data-placeholder="true" attribute, you can make a default placeholder. 

<select id="dropdownmenu" 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

Option Input type Default value Description
data-hide-placeholder-menu-items boolean true Hides/Reveals the placeholder option in dropdown list of the DropdownMenu.
data-inline boolean false Sets the DropdownMenu component as inline/normal type.
data-native-menu boolean true Sets the DropdownMenu component as native/custom type.

Methods

To call methods on DropdownMenu, see the following code:

var element = document.getElementById("dropdownmenu"),
    widget = tau.widget.DropdownMenu(element);

widget.methodName(methodArgument1, methodArgument2, ...);

Summary

Method Description 
open (  )

Opens DropdownMenu.

 
close (  )

Closes DropdownMenu.

 
enable (  )

Enables DropdownMenu.

 
disable (  )

Disables DropdownMenu.
open

Opens DropdownMenu.

open ( )

Return value:

No return value

Code example:

 
<select id="dropdownmenu" 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 elDropdownMenu = document.getElementById("dropdownmenu"),
    widget = tau.widget.DropdownMenu(elDropdownMenu);

widget.open();
</script>
close

Closes DropdownMenu.

close ( )

Return value:

No return value

Code example:

 
<select id="dropdownmenu" 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 elDropdownMenu = document.getElementById("dropdownmenu"),
    widget = tau.widget.DropdownMenu(elDropdownMenu);

widget.close();
</script>
enable

Enables DropdownMenu.

enable ( )

The method removes the disabled attribute for the DropdownMenu component and adds classes related to the enabled state.

Return value:

Type Description
DropdownMenu The enabled DropdownMenu.

Code example:

 
<select id="dropdownmenu" 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 elDropdownMenu = document.getElementById("dropdownmenu"),
    widget = tau.widget.DropdownMenu(elDropdownMenu);

widget.enable();
</script>
disable

Disables DropdownMenu.

disable ( )

The method sets the disabled attribute for the dropdownmenu component and adds classes related to the disabled state.

Return value:

Type Description
DropdownMenu The disabled DropdownMenu.

Code example:

 
<select id="dropdownmenu" 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 elDropdownMenu = document.getElementById("dropdownmenu"),
    widget = tau.widget.DropdownMenu(elDropdownMenu);

widget.disable();
</script>