Option name	Type	Description
selector	domelement_or_querystring_or_jqueryobject	either empty (for select element mirroring), or containing ".js-options"/".options" with the dropdown choices, and ".js-current"/".current" to display the active option. If a scrollbar is desired, it should also contain ".js-scrollable"/".scrollable", ".js-scrollbar"/".scrollbar", ".js-track"/".track", and ".js-handle"/".handle"
options	object	Object containing the settings for this dropdown label {string: ""} Copy to show in ".js-current"/".current" before an option has been selected. If left empty, the first option in the dropdown will be shown instead selectElement {domelement_or_querystring_or_jqueryobject} If this dropdown should mirror and sync with a real (hidden) form select element, set this option to that select element templateID {string: ""} ID to a JavaScript template in the current page that contains HTML for the dropdown's markup. If left unset, the default template will be used, unless 'selector' already contains dropdown HTML maxHeight {number: 200} Max height of the dropdown when open. Only used if a scrollbar is enabled mobileMode {boolean: false} When true, and the dropdown is mirroring a select element, clicking the dropdown will just trigger the default select element behaviour enableMouseLock {boolean: true} If true, and a scrollbar is in use, scrolling the mouse wheel while hovering over the open dropdown wont scroll the page

Dependencies:

NATION.Utils
NATION.EventDispatcher
Optionally NATION.VerticalScrollbar if you want a scrollbar

About:

JavaScript downdown menu with optional scrollbar (via NATION.VerticalScrollbar)

There are two ways this class can work:

It can act on existing HTML (inside selector) and make it function as a dropdown
It can mirror an actual form select element, and keep both synched

Creating a custom dropdown template

If you want to use HTML other than the default, you'll need to either define a template inside your selector (if not mirroring a select field), or define one in a JavaScript template tag, and reference it by ID.

If you're not mirroring a select field, the only tag that needs to be in your HTML is {{defaultOption}}, which should be inside the .js-current element. This is where the code will insert the currently selected option text

If you ARE mirroring a select field, your template needs a few more tags in addition:

{{#each options}} - Start of the loop to generate all the different options
{{this.optionValue}} - This is where the select's option 'value' attribute is inserted. Currently this has to be the href attribute of an anchor
{{this.optionLabel}} - This is where the select's option's textContent is inserted. Basically the visible text that the user sees for the option
{{/each}} - End of the option loop

Example

SELECTED

property

Dropdown.prototype.SELECTED

Event that fies when a new option is selected by the user

RESELECTED

property

Dropdown.prototype.RESELECTED

Event that fires when an option is selected by the user that is already selected

OPENED

property

Dropdown.prototype.OPENED

Event that fires when the dropdown opens

CLOSED

property

Dropdown.prototype.CLOSED

Event that fires when the dropdown closes

getSelectedOptionValue

method

Dropdown.prototype.getSelectedOptionValue() ->string

Returns the currently selected option's value

getSelectedOptionLabel

method

Dropdown.prototype.getSelectedOptionLabel() ->string

Returns the visible text for the currently selected option

getSelectedOptionID

method

Dropdown.prototype.getSelectedOptionID() ->number

Returns the zero-indexed ID of the currently selected option

isOpen

method

Dropdown.prototype.isOpen() ->boolean

Returns whether the dropdown is open or not

open

method

Dropdown.prototype.open()

Opens the dropdown pane

close

method

Dropdown.prototype.close()

Closes the dropdown pane

setActiveOption

method

Dropdown.prototype.setActiveOption()

Option name	Type	Description
index	number	The zero-indexed ID for the option that should be marked as selected

Select the option specified by 'index' and show it as active